父子组件通信

react 组件

react 组件有 function 组件和 class 组件，在以前，function 组件和 class 组件最大的区别在于 function 组件没有自己的状态。
当然，后边使用 useState 另说，这里不做讨论。
如果一个函数组件，需要做一个点击按钮加一的效果的话，需要先声明一个全局变量，然后再给按钮绑定 add 函数，在点击了之后重新 render 页面。demo
类组件实现点击加一效果则不需要全局变量，可以直接在组件内部通过 this.state 来声明局部变量，需要修改变量的时候使用 react 提供的 this.setState 来修改变量。demo
为什么函数组件不使用局部变量呢，因为函数组件重新 render 的话会把函数内部的变量重置，而类组件只是重新调用 render 函数，不影响 constructor 里的 this.state。
关于 setState:

1. 不能直接修改 state ，而要使用 setState。而且在使用 setState 给某个变量赋值的时候，不会覆盖掉其他的变量。比如

   this.state = {a: 1, b: 2}
   this.setState({b: 3}) // 这一步不会把 a: 1 这个键值对覆盖掉。

2. react 会把多个 setState 合并成一个。比如

   // a: 0
   this.setState({a: this.state.a+2})
   this.setState({a: this.state.a+1})
   // a: 1

   得到的结果是 a: 1 ，因为前面的被后面的覆盖掉了。而如果你想要分两次调用的话，则需要借助函数。

   // a: 0
    this.setState({
      number: this.state.number + 2
    })
    this.setState((state)=>{
      return {number: state.number + 1}
    })
    // a: 3

   使用第二个参数传入一个回调函数也是可以的

   this.setState({
     number: this.state.number + 2
   }, ()=>{
       number: this.state.number + 1
   })

   此外，react 在 setState 之后，如果检查到了页面的变化，会主动去重新 render 局部更新页面（找到需要更新哪些地方的过程叫做 DOM diff）。

组件通信之父传子

父组件要给子组件传递信息的话，使用 props 直接传递即可。
比如说父组件有一个 number ，要在子组件中显示，那么直接在调用子组件的时候 <Son number={this.state.number} />
子组件使用 props 接收父组件传过来的参数

function Son(props) {
  return <div>{props.number}</div>
}

对于 class 组件也一样

class Son extends React.Component {
  render() {
    return <div>{this.props.number}</div>
  }
}

原则上不要去修改父组件传进来的 props 。

另， props.children 可以获取子节点。

<Son> <h1>hello</h1> </Son>
function Son(props) {
    return <div>{props.children}</div>
}
// 得到的就是  <div> <h1>hello</h1> </div>

组件通信之子传父

子组件如果要传递信息给父组件，先由父组件通过 props 传递一个函数给子组件，然后子组件在一定的时候调用这个函数，把数据放在函数的参数里。demo

其他

React父组件调用子组件方法

打赏