React组件的属性和方法

1. SthComp.propTypes

// V15.5之后
import PropTypes from 'prop-types';

该方法适用于函数组件和class组件。

如果使用了@babel/plugin-proposal-class-properties插件，

可以直接在组件内部作为静态属性。

class App extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired
  }
  render() {
    return(
      <div>{this.props.name}</div>
    )
  }
}

在组件（class组件和函数组件都适用）外部：

class App extends React.Component {
  render() {
    return(
      <div>{this.props.name}</div>
    )
  }
}
App.propTypes = {
  name: PropTypes.string.isRequired
}

// 函数组件
function App(props){
  return(
    <div>{props.name}</div>
  )
}
App.propTypes = {
  name: PropTypes.string.isRequired
}

2.SthComp.defaultProps

用法同propTypes。既可以在组件内部也可以在组件外部。

用于给props属性赋初始值,  当属性值为undefined时生效，null不生效。

运行在propTypes类型检查前。

function App(props){
  return(
    <div>{props.name}</div>
  )
}
App.defaultProps = {
  name: "lyra"
}
ReactDOM.render(<App name={undefined} />, window.root)

3.SthComp.getDerivedStateFromProps-类组件

返回一个state值的对象。

4.SthComp.getSnapShotBeforeUpdate-类组件