react组件生命周期

跨组件通信 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>
    )
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。 经导师精心指导并认可、获 98 分的毕业设计项目!【项目资源】:微信小程序。【项目说明】:聚焦计算机相关专业毕设及实战操练,可作课程设计与期末大作业,含全部源码,能直用于毕设,经严格调试,运行有保障!【项目服务】:有任何使用上的问题,欢迎随时与博主沟通,博主会及时解答。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值