React学习--- state状态

React学习— state状态

1.基本使用，初始化

组件构造方法中定义组件初始状态;

组件模板中可以用 this.state.xxx 访问状态;

2.修改状态

修改组件状态,必须用 this.setState({ xxx:yyy })

this.setState({ xxx:yyy })可以放在任何执行js代码的地方，不能放在render中执行

在 React 中，如果是由 React 引发的事件处理（比如通过 onClick 引发的事件处理）， 调用 setState 不会同步更新 this.state，除此之外的 setState 调用会同步执行 this.state。 所谓“除此之外”，指的是绕过 React 通过 addEventListener 直接添加的事件处理函数， 还有通过 setTimeout/setInterval 产生的异步调用。

handleClick(index) {
    
    
    // setState() 更新组件状态
    // setState() 会将传入的参数属性和原有的组件state进行合并
    // setState() 会触发组件更新，组件更新时当前组件的render方法会立即重新执行，render方法内的所有js代码都会重新执行

    // this.state.currentIndex = index; 这样无法触发组件更新

    // 特点：只要调用setState 当前组件一定更新(render方法调用了)
    // 特点：只要调用setState 对当前组件状态更新是异步的，不能在setState 之后立即获取state最新的值，想要获取只能在setState 的第二个参数的回调函数中获取
    console.log('handleclick');
    this.setState({
    
    
      currentIndex: index
    }, () => {
    
    
      console.log(this.state.currentIndex);
    })
    // console.log(this.state.currentIndex); 不要在这里获取state最新的值，因为获取不到
  }

3.props与state的区别

​ props 是一个父组件传递给子组件的数据流，这个数据流可以一直传递到子孙组件。 而 state 代表的是一个组件内部自身的状态.

​ props 或者 组件内部 state 改变都会导致组件重新渲染. 既然两者的变化都有可能导 致组件重渲染，所以只有理解 props 与 state 的意义，才能很好地决定到底什么时候用 props 或 state.

​ 对于组件自身来讲,props 是只读的, state 是可变的.