setState(updater, [callback])
- 参数1: updater: 更新数据 (函数/对象)
- 参数2callback: 更新成功后的回调 FUNCTION
changeName=()=>{
this.setState({
name: "大王"
});
}
- 异步:react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能
- 浅合并 Object.assign()
组件间通信
在 React.js 中,数据是从上自下流动(传递)的,也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件,但是子组件不能修改 props - React.js 是单向数据流,如果子组件需要修改父组件状态(数据),是通过回调函数方式来完成的。
- 父级向子级通信 把数据添加子组件的属性中,然后子组件中从props属性中,获取父级传递过来的数据
父组件向子组件传参
render(){
return (<div><Child
name = {this.state.name} //把数据添加子组件的属性中
changeName = {this.changeName}
>
</Child></div>)
}
//接收父组件的传参
let {name,changeName} = this.props
- 子级向父级通信 在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级,在子级中调用该方法父级传递消息
跨组件通信 context
React.createContext(defaultValue);{ Consumer, Provider } =
createContext(defaultValue)
- Context.Provider 在父组件调用 Provider 传递数据
value 要传递的数据 - 接收数据
class.contextType = Context;
static contextType = Context;
this.context;
Context.Consumer <Consumer> {(props)=>{ console.log(props); return <div></div>
}} </Consumer>
注意在使用不熟练时,最好不要再项目中使用 context,context一般给第 三方库使用
组件的生命周期
所谓的生命周期就是指某个事物从开始到结束的各个阶段,当然在 React.js 中指的是组件从创建到销毁的过程,React.js 在这个过程中的不同阶段调用的函数,通过这些函数,我们可以更加精确的对组件进行控制,前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数
生命周期函数详解
挂载阶段
constructor(props)
类的构造函数,也是组件初始化函数,一般情况下,我们会在这个阶段做一些初始化的工作
- 1.初始化 state
- 2.处理事件绑定函数的 this
类式组件中定义constructor,一定要接收props,调用super()进行继承
// constructor:构造函数
constructor(props){
super(props);
this.state = {
age:16,
name: "王"
}
console.log("构造函数");
}
-
static getDerivedStateFromProps(props, state)
- props:父组件传递过来的参数
- state:自身组件的参数
该方法会在 render 方法之前调用,无论是挂载阶段还是更新阶段,它的存在只有一个目的:让组件在 props 变化时更新 state
static getDerivedStateFromProps(props, state){
console.log("即将要挂载",props, state);
return state;
}
-
render()
render 方法是 Class 组件必须实现的方法 -
componentDidMount()
在组件挂载后(render 的内容插入 DOM 树中)调用。通常在这个阶段,我们可以:
- 操作 DOM 节点
- 发送请求
//组件挂载完成
componentDidMount(){
console.log("组件挂载完成");
}
更新阶段
父组件更新引起组件更新
-
static getDerivedStateFromProps(props, state)
-
shouldComponentUpdate(nextProps, nextState)
发生在更新阶段,getDerivedStateFromProps 之后,render 之前,该函数会返回一个布尔值,决定了后续是否执行 render,首次渲染不会调用该函数
// 组件的state或者props 改变
shouldComponentUpdate(nextProps, nextState){
console.log(1);
// 注意这个返回值决定是否重新渲染DOM,true 重新渲染DOM 生命周期会继续向下走,
// false不渲染DOM,更新结束
return true;
}
- componentWillUpdate()
// 即将更新组件
componentWillUpdate(nextProps, nextState){
console.log("即将更新组件");
}
-
getSnapshotBeforeUpdate(prevProps, prevState)
该方法在 render() 之后,但是在输出到 DOM 之前执行,用来获取渲染之前的快照。当我们想在当前一次更新前获取上次的 DOM 状态,可以在这里进行处理,该函数的返回值将作参数传递给下个生命周期函数
-
componentDidUpdate
该函数并不常用。
-
componentDidUpdate()
该函数会在 DOM 更新后立即调用,首次渲染不会调用该方法。我们可以在这个函数中对渲染后的 DOM 进行操作
// 完成渲染即将被挂载在DOM中, 这会已经生成了新的DOM节点了,
getSnapshotBeforeUpdate(prevProps, prevState){
console.log("完成渲染即将被挂载在DOM中");
return 11;// 不过还有修改文档,你可以在这里去获取更新之前的文档
}
组件自身更新
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
卸载阶段
-
componentWillUnmount()
该方法会在组件卸载及销毁前调用,我们可以在这里做一些清理工作,如:组件内的定时器、未完成的请求等
componentWillUnmount(){
console.log("组件即将卸载");
}
- 错误处理
当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法
static getDerivedStateFromError()
componentDidCatch()