跨组件通信 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)
类的构造函数,也是组件初始化函数,一般情况下,我们会在这个阶段做一些初始化的工作
初始化 state
处理事件绑定函数的 this
二、static getDerivedStateFromProps(props, state)
注意 this 问题
三、render()
render 方法是 Class 组件必须实现的方法
四、componentDidMount()
在组件挂载后(render 的内容插入 DOM 树中)调用。通常在这个阶段,我们可以:
操作 DOM 节点
发送请求
更新
父组件更新引起组件更新
static getDerivedStateFromProps(props, state)
该方法会在 render 方法之前调用,无论是挂载阶段还是更新阶段,它的存在只有一个目的:让组件在 props 变 化时更新 state
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
组件自身更新
shouldComponentUpdate()
componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
卸载
componentWillUnmount
错误处理
当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法
static getDerivedStateFromError()
componentDidCatch()
受控组件与非受控组件
受控组件
什么是受控组件:
类似于vue的双向数据绑定,数据和视图之间可以相互影响
什么时候使用受控组件:
需要对组件的value值进行修改时,使用受控组件。比如:页面中有一个按钮,每点击一次按钮受控组件的值加1
受控组件: 类似于Vue中的双向数据绑定
数据跟视图之间可以相互影响
state = {
info: "这是value值"
}
render() {
let { info } = this.state
return (
<div>
<input type="text"
value={info}
onChange={({target})=>{
this.setState({
info:target.value
})
}}
// target这里是获取input
onClick={(target)=>{
console.log(target)
}}
/>
<button onClick={() => {
console.log(info)
}}>点一点</button>
</div>
)
}
非受控组件
什么是非受控组件:
类似于单项数据流,只可以数据改变视图
什么时候使用受控组件:
任何时候都不需要改变组件的value值,这时候可以使用非受控组件。
非受控组件: 我们不需要同步 value 值(defaultValue,defaultChecked)
非受控组件: 类似于单向数据流
只可以数据改变视图
state = {
info: "这是value值"
}
render() {
let { info } = this.state
return (
<div>
<input type="text" defaultValue={info}/>
<input type="text" defaultValue={info}/>
<input type="text" defaultValue={info}/>
</div>
)
}