【ReactJs学习笔记】【状态和生命周期+单向数据流理解】

目录

生命周期

理解

方法

//构造函数
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~