react state 状态数据

1. props 和 state
   props 特点是只读，即修改不会让视图同步更新，想要更新必须再次调用 render() 渲染函数
   state 特点是可读可写，在使用 this.setState({属性名: 属性值}) 修改时会同步更新视图

2. state 创建和使用
   state 必须在类组件的 constructor 内部，通过 this.state = {属性名:属性值} 定义
   state 渲染数据：在当前类的 render 函数中，使用 this.state.属性，
   state 设置数据：在当前类中，使用 this.setState({属性名: 属性值}) 方法

3. 注意事项
   this.setState() 是异步的，如果需要在数据改变后执行，可以在 this.setState() 的回调函数中执行

   import React from "react";
   class Component1 extends React.Component {
   constructor(props) {
   super(props);
   this.state = {
   state1: "状态1",
   propsState: this.props.other,
   };
   }
   fnChange1 = () => {
   this.setState({ state1: "变化后的状态 state1" }, () => {
   console.log(this.state.state1);
   });
   console.log(this.state.state1);
   };
   fnChange2 = () => {
   this.setState({ propsState: "变化后的状态 propsState" }, () => {
   console.log(this.state.propsState);
   });
   console.log(this.state.propsState);
   };
   render() {
   return (
   

   
   <button onClick={this.fnChange1}>点击改变 state</button>
   <button onClick={this.fnChange2}>点击改变 state</button>
   

   {this.state.state1}

   
   

   {this.state.propsState}

   
   
   
   );
   }
   }

   function App() {
   return (
   

   
   <Component1 other="props 参数" />
   
   
   );
   }

   export default App;