State & 生命周期

2019独角兽企业重金招聘Python工程师标准>>>

先看这张图

react 中的钩子函数

componentDidMount() {}

componentWillUnmount() {}

state的使用

this.state.XXX,不会重新渲染组件

this.setState({})会重新渲染组件

构造函数是唯一能够初始化this.state的地方。

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

上面两段代码意思相同：设置counter的值为上一个状态的counter+increment,这里不能直接 写 counter:this.state.counter+increment

 

状态更新合并

当你调用 setState() 时，React 将你提供的对象合并到当前状态。

数据自顶向下流动

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。

转载于:https://my.oschina.net/u/3643058/blog/3039209