react 相关知识

[better2021]

使用 PropTypes 进行类型检查

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      <h3>Hello, {this.props.age}</h3>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired
  age: PropTypes.oneOfType([PropTypes.number,PropTypes.string])  // 一个对象可以是几种类型中的任意一个类型
};

[better2021]

生命周期

 /**
   * 组件状态改变时，自动执行
   * 返回true，则会自动执行render函数
   * 返回false，则不执行render函数
   * 可以用来优化性能
   */
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate")
    if (nextProps.xx !== this.props.xx) {
      return true
    } else {
      return false
    }
  }

  /**
   * 两种方法获取input上输入的value值
   * 第一种：event事件获取value -> event.target.value
   * 第二种：ref的绑定获取input上的value值 -> this.input.value
   */
  changeInput = event => {
    // const val = event.target.value
    const val = this.input.value
    this.setState({
      value: val
    })
  }