React类组件和函数组件（props，state，绑定事件）

类组件和函数组件使用props

• 类组件

<Son messageForSon="儿子你好" />

{this.props.messageForSon}

• 函数组件

<Grandson messageForGrandson="孙子你好" />

{props.messageForGrandson}

类组件和函数组件使用state

• 类组件

class Son extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0,
      m: 0
    };
  }
  addN = () => {
    this.setState({ n: this.state.n + 1 });
  };
  addM() {
    // 这样写 this 可能变成 window
    this.setState({ m: this.state.m + 1 });
  }
  render() {
    return (
      <div className="Son">
        儿子 n: {this.state.n}
        <button onClick={this.addN}>n+1</button>
        m: {this.state.m}
        <button onClick={()=>this.addM()}>m+1</button>
        {/* <button onClick={this.addM}>m+1</button> */}
        <Grandson />
      </div>
    );
  }
}

• 函数组件

const Grandson = (props) => {
  // const array = React.useState(0);
  // const n = array[0];
  // const setN = array[1];
  //setN之后是得到一个新的n，而不是改变原有的n

  const [n, setN] = React.useState(0); //初始值，如何读，如何写
  const [m, setM] = React.useState(0);
  return (
    <div className="Grandson">
      孙子 n:{n}
      {props.messageForGrandson}
      <button onClick={() => setN(n + 1)}>n+1</button>
      m: {m}
      <button onClick={() => setM(m + 1)}>m+1</button>
    </div>
  );
};

setState注意事项

setState会异步更新UI

setState之后，state不会马上改变，立马读state会失败

推荐的方式：setState是异步的，所以用函数，state先获取旧的变量，+1，可以得到最新的值

addN = () => {
    // this.setState((state) => {
    //   return {
    //     n: state.n - 1,
    //   };
    // });
    this.setState((state) => ({
      n: state.n + 1,
    }));
  };

复杂state

类组件的setState会自动合并第一层属性，但是并不会合并第二层属性，使用Object.assign或者...操作符，

数据：

 class Son extends React.Component {
   constructor() {
     super();
     this.state = {
       //只会合并第一层，不会合并第二层
       n: 0,
       m: 0,
       user: {
         name: "John",
         age: 18,
       },
     };
   }

解决办法：

   changeUser() {
     this.setState({
       //m和n不会被置空
       user: {
         ...this.state.user,
         name: "jack",
         //age被置空
       },
     });
   }

函数组件的setState则完全不会自动合并，使用...操作符合并

<button onClick={() => setState({...state, n:state.n + 1})}>n+1</button>
<button onClick={() => setState({...state, m:state.m + 1})}>m+1</button>

参考资料：饥人谷