版权声明:本文为博主原创文章,未经博主允许不得转载。(github:KuanG97) https://blog.csdn.net/m0_37136491/article/details/82015653
目录
生命周期
理解
方法
//构造函数
constructor(props) {
super(props);
this.state = {date: new Date()};
}
//生命周期的方法(此处按照先后顺序写):
componentWillMount(){
//在渲染前调用
}
componentDidMount() {
//在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构。常用于初始render后获得数据,开启定时器。
}
componentWillReceiveProps (){
//在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
}
shouldComponentUpdate (){
//返回一个布尔值。在组件接收到新的props或者state时被调用。
}
componentWillUpdate(){
//在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
}
componentDidUpdate (){
//在组件完成更新后立即调用。在初始化时不会被调用。
}
componentWillUnmount(){
//在组件从 DOM 中移除的时候立刻被调用。常用于clear线程,定时器。
}
状态(跟微信小程序里的setdata大同小异)
不能直接更改状态
不能直接使用this.state赋值,而是使用this.setState
如下例子
this.setState({comment: 'Hello'});
不建议在setState中回调state
建议使用以前一个状态(prevState)
作为第一个参数的回调可以避免这种情况
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
状态更新可能是异步的
this.props和this.state可能是异步更新的,因此不该依靠他们的值立马来计算下一个状态
,除非是在新的渲染后了的。
错误示范
此处多次调用可能无法更新计算成功的值
this.setState({
counter: this.state.counter + this.props.increment,
});
解决方法:使用第二种形式的 setState() 来接受一个函数而不是一个对象
。 该函数将接收先前的状态作为第一个参数,将此次更新被应用时的props做为第二个参数
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
数据自顶向下流动(单向数据流)
理解单向数据流: 任何状态始终由某些特定组件所有,并且从该状态导出的任何数据或 UI 只能影响树中下方的组件(状态通常被认为是局部或封装在一个组件。 除了拥有并设置它的组件外,其它组件不可访问)。组件间得知状态,也只能通过父子组件间的通信实现。
快捷链接
全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
ESLint问题记录 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你,无限欢迎给我的github库点个收藏Star~0v 0~