react 2013 单向数据流
和vue区别
内存的改变影响页面的改变,不管页面的改变, 影响内存的改变
自己处理页面的改变, 影响内存, 通过事件, 调用函数, 通知根据内存对象改变页面
没有指令
安装React脚手架: npm install -g create-react-app
创建脚手架: create-react-app myApp
产看版本: create-react-app --version
安装react-router: cnpm i react-router -S
安装react-router-dom: cnpm i react-router-dom -S
安装redux: cnpm i redux
展示配置文件: npm run eject
使用sass: npm i node-sass
有变化的属性
className
htmlFor
style={{ fontSize: '12px' }}
this.state: 读取状态
this.setState: 更新组件的状态
import React, { Component } from 'react' //创建组件、虚拟DOM元素, 生命周期
import ReactDOM from 'react-dom' //把创建好的 组件 和 虚拟DOM放到页面上面展示
创建虚拟DOM元素
// 参数1: 创建的元素的类型, 字符串, 表示元素的名称
// 参数2: 是一个对象或 null, 表示 当前这个 DOM 元素的属性
// 参数3: 子节点 (包括 其他 虚拟DOM 获取 文本子节点)
// 参数n: 其它子节点
const myh1 = React.createElement('h1',{title:"this is a h1", id: "myh1"},'这是一个标题H1')
使用 ReactDOM 把虚拟 DOM 渲染到页面上
// 参数1: 要渲染的那个虚拟DOM元素
// 参数2: 指定页面上一个容器
ReactDOM.render(myh1, document.getElementById("app"))
class关键字创建组件
class Movie extends React.Component{
//render 函数的作用， 是 渲染 当前组件所对应的 虚拟DOM元素
render() {
return (
<div>这是Movie组件</div>
)
}
}
##const Footer = ()=>{
return (
)
}
Ref选取dom元素
<input type="text" ref="id"/> ref ==> this.refs.id.value
<input type="text" ref="id=>this.id = id" /> this.id.value
限定接收props类型
TodoList.propTypes = {
title: PropTypes.number.isRequired //必须传递此属性
}
array ==> bool ==> func ==> number ==> object ==> string ==> symbol
指定属性默认值
Person.defaultProps = {
sex: '男',
age: 18
}
父传子:
组件接收属性值的传递:
this.props属性名
例如:
<Header title="留言"> <div>这是我的children</div> </Header>
constructor(props){
super(props)
render(){
return(
{this.props.title}
{this.props.children}
)
}
}
子传父:
在父组件中定义一个设置state的方法, 然后把这个方法通过属性传递给子组件
在子组件中调用这个方法。 把值传入就可以了。
路由react-router-dom: exact精确匹配
安装: cnpm i react-router-dom -S
引入: import { BrowserRouter,HashRouter, Route, Link, NavLink, Switch, Redirect, useParams } from 'react-router-dom';
代码:
<Router>
<div>
<switch> //匹配到第一个终止匹配
<Route exact path="/home" component={Home} />
<Route exact path="/kind" component={Kind} />
<Route exact path="/user" component={User} />
<Redirect from="/" to="/home" /> //跟目录跳转home页面
<Route exact path="/404" component={404}> //配置404页面
<Redirect from="/*" to="/" /> //重定向404页面
</switch>
</div>
</Router>
react路由懒加载
yarn add react-loadable
import Loadable from 'react-loadable';
编程跳转
指定前进后退: this.props.history.go()
后退: this.props.history.goBack()
前进: this.props.history.goForward()
this.props.history.push('/Home');
query传参
this.props.history.push({ pathName:'/Home', search:'id=id&name=name' })
params动态路由传参:
跳转传参: <NavLink to="/detail/paramName" activeClassName="navActive"></NavLink>
路由配置: <Route path="/detail/:paramName" component={Detail} />
组件参数接收: this.props.match.params.paramName
query动态路由传参:
跳转传参: <NavLink to={{pathName:"/detail",search:"?id=123&name=tian"}} activeClassName="navActive"></NavLink>
路由配置: <Route path="/detail" component={Detail} />
组件参数接收: this.props.location.search
① 此时拿到是一个字符串 'id=1&name=2'
需要安装
npm i query-string
使用
import queryString from 'query-string';
queryString.parse( this.props.location.search )
redux
安装 npm i redux
配置
index.js文件下
import { createStore } from 'redux';
import reducer from './reducer.js'
const store = createStore(reducer);
export default store;
reducer.js文件下
const defaultState = {
list: [1,2,3,4,5]
}
export default (state=defaultState, action) => {
return state
}
获取state:
import store from './store.js'
store.getState().list;
订阅state改变: //每次派发action的时候重新获取数据
store.subscribe(this.handleSubScribe)
触发对应事件改变state
handleSubScribe = ()=>{
this.setState({
initState = store.getState().initState;
})
}
更新state:
const action = {
type: "CHANGE_VALUE",
value: '新的value'
};
store.dispatch(action)
在reducer.js文件下
export default (state=defaultState, action) => {
if(action.type == 'CHANGE_VALUE'){
const initState = {...state};
initState.value = action.value;
return initState;
}
return state
}
模块化:
reducer.js文件下
import {combineReducers} from 'redux';
import homeReducer from './modules/homeReducer'
import userReducer from './modules/userReducer'
let reducer = combineReducers({
home: homeReducer,
user: userReducer
})
export default reducer
homeReducer.js文件下 || userReducer.js文件下
const defaultState = {
list: [1,2,3,4,5]
}
export default (state=defaultState, action) => {
return state
}
获取:
store.getState().home.value
订阅:
store.subscribe(this.handleSubScribe);
handleSubScribe = () => {
this.setState({
value: store.getState().home.value
})
}
更新state:
const action = {
type: "CHANGE_VALUE",
value: '新的value'
};
store.dispatch(action)
在homeReducer.js文件下
export default (state=defaultState, action) => {
if(action.type == 'CHANGE_VALUE'){
const initState = {...state};
initState.value = action.value;
return initState;
}
return state
}
react-redux
安装:
cnpm i react-redux
APP.js文件内
import store from './store/index.js'
所有组件使用 ** 包裹
<Provider store={store}></Provider>
页面内使用:
const mapStateToProps = state => {
return {
name: state.home.name
}
}
const mapDispatchToProps = dispatch => {
return {
changeName(){
dispatch({
type:'CHANGE_NAME',
value:'田国元'
})
}
}
}
export default connect(reduxState, reduxAction)(Home);
redux-thunk
安装:
cnpm i redux-thunk
store文件下index.js
import { createStore,compose,applyMiddleware } from 'redux';
import reducer from './reducer.js'
import thunk from 'redux-thunk'
const store = createStore(reducer,compose(applyMiddleware(thunk)));
export default store;
页面内: ## redux-thunk异步请求解决了redux的action只能是对象, 可以让对象形式改成为异步函数,异步函数接收dispatch
const reduxAction = dispatch => {
return {
changeName(){
dispatch(dispatchs => {
fetch('./data.json').then(res=>res.json()).then(data=>{
console.log(data);
dispatchs({
type:'CHANGE_NAME',
value: data.id
})
})
})
}
}
}
React生命周期
getDefaultProps 初始化prop属性 (es6的写法中被删除)
getInitialState 初始化当前状态 (es6的写法中被删除)
**componentWillMount 组件初始化前 (即将进入dom)
**componentDidMount 组件初始化DOM插入完后 (已经进入dom)
**render 触发state改变UI
componentWillReceiveProps 父组件传递调用方法
shouldComponentUpdata 是否要更新 return false 就不会更新
componentWillUpdate 组件更新之前
componentDidUpdate 组件更新之后
componentWillUnmount 组件销毁前
componentDidUnmount 组件销毁后
注意点:
1. XML 基本语法
定义标签是, 只允许被一个标签包裹
标签一定要闭合
2. 元素类型
小写首字母对应 DOM 元素属性
大写首字母对应组件元素
注释使用 js 注释方法
3. 元素属性
class 属性改为 className
for 属性改为 htmlFor
Boolean 属性: 省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true
4. JavaScript 属性表达式
属性只要使用表达式, 只要用 {} 替换 "" 即可
<input type="text" value={ val ? val : "" } />
5. HTML 转义
React会将所有要显示到 DOM 的字符串转义, 放置 XSS.
后台传过来的数据带页面标签的是不能直接转义的, 集体转移的写法如下:
var content= ' <strong> content </strong> ';
React.render(
<div dangerouslySetInnerHTML = {{__html: content}}> </div>,
document.body
)
动画: ReactCSSTransitionGroup
1. 引入组件
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
2.使用ReactCSSTransitionGroup 标签包裹动画标签
<ReactCSSTransitionGroup
transitionName='example'
transitionEnterTimeout={500}
transitionLeaveTimeout={300}
>
</ReactCSSTransitionGroup>
注意:
生成{items}的时候, 里面没一个元素必须包含KEY属性。 因为react 要判断哪个元素进入, 停留, 移除
css: {
.example-enter // 进入动画的起点
.example-enter-active // 进入动画的终点
.example-leave // 离开动画的起点
.example-leave-active // 离开动画的终点
.example-enter{ margin-left: -200px; transform:rotate(0deg); transition-duration:500ms; }
.example-enter-active{ margin-left: 0px; transform:rotate(3600deg); }
.example-leave{ margin-left:0px; opacity:1; transition-duration:300ms; }
.example-leave-active{ margin-left:600px; opacity:0; }
}