关于16.6版本的react组件传参

react组件传参详情了解一下～（内包含16.6版本react生命周期的使用）

组件传参父传子：

父组件

import React, { Component } from 'react';
import Three from '../three';
export default class Two extends Component {
  constructor(props) {
    super(props);
    this.state = {
      n: 1
    };
  }
  incrime = () => {
    this.setState({
      n: this.state.n + 1
    });
    // 要保证自身先+1再赋值，所以不可以用++，不过++可以放在前面
  };
  render() {
    let { n } = this.state;
    return (
      <div className="two">
        <Three n={n} />
        <div>来自父组件的{n}</div>
        <button onClick={this.incrime}>+</button>
      </div>
    );
  }
}

子组件：

import React, { Component } from 'react';
export default class Three extends Component {
  constructor(props) {
    super(props);
    this.state = {
      a: props.n
      // 我们把a属性的值叫做派生状态（derivedState）
    };
  }
  static getDerivedStateFromProps(props, state) {
    return {
      a: props.n
    };
    // props参数一定要放前面
    // 这个钩子函数就是为了改变state的值，准确来说这是要更新派生的state，此方法为新增
  }
  // 旧版方法不是静态，可以直接调用this
  // 此为更新阶段的钩子函数，已经废弃
  // componentWillReceivProps(props) {
  //   this.setState({
  //     a: props.n
  //   });
  // }
  // 为什么此方法废弃，因为react把核心渲染算法改变了（fiber算法），所以带will的渲染钩子函数不安全了，现在react渲染的时候是可以被打断的
  render() {
    return <div>来自子组件的{this.state.a}</div>;
  }
}

组件传参父子相互传参：

父组件通过constructor传，子组件也通过constructor接收
子组件中的值必须是state中的一个变量，派生状态的值来自props
不是父组件中的所有传过来的值都叫做派生状态，而是父组件的值传递给了子组件的state，这才叫派生状态
父组件：

import React, { Component } from 'react';
import Item from '../item/index';
export default class Todos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [
        {
          id: 1,
          text: 'aaa',
          flag: true
        },
        {
          id: 2,
          text: 'bbb',
          flag: false
        },
        {
          id: 3,
          text: 'ccc',
          flag: true
        }
      ]
    };
  }
  change = index => {
    this.state.list[index].flag = !this.state.list[index].flag;
    this.setState({
      list: this.state.list
    });
  };
  render() {
    let { list } = this.state;
    return (
      <div>
        <ul>
          {list.map((item, index) => {
            return (
              <li key={item.id}>
                <Item {...item} index={index} change={this.change} />
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
// <Item {...item} index={index} change={this.change} /> 这是父组件给子组件传值

子组件：

import React, { Component, PureComponent } from 'react';

export default class Item extends PureComponent {
  第一种优化方案;
  shouldComponentUpdate(nextProps) {
    return nextProps.flag !== this.props.flag;
    // 新值不等于旧值才进行渲染，避免不必要的渲染，提升代码性能
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    return;
  }

  componentDidMount(prevProps, prevState, snapshot) {}
  render() {
    let { change, flag, text, index } = this.props;
    return (
      <div>
        <input
          type="checkbox"
          checked={flag}
          onChange={change.bind(this, index)}
        />
        <span style={{ color: flag ? 'red' : '' }}>{text}</span>
      </div>
    );
  }
}

// 第二套性能优化方案，使用React.memo进行浅比对，是对无状态组件的性能优化工具
// let Item = React.memo((props) => {
//   let { change, flag, text, index } = props;
//   return (
//     <div>
//       <input
//         type="checkbox"
//         checked={flag}
//         onChange={change.bind(this, index)}
//       />
//       <span style={{ color: flag ? 'red' : '' }}>{text}</span>
//     </div>
//   )
// });
// export default Item;

/*<input
type="checkbox"
checked={flag}
onChange={change.bind(this, index)}
/>
子组件再反过来给父组件传值
此时
*/

来源：CSDN

作者：波阿斯

链接：https://blog.csdn.net/zzy929378/article/details/104464385