React 进阶二 组件详解

React组件

React的组件大概分为俩部分，无状态组件和有状态组件

• 无状态组件。下面React官网中定义的一个无状态组件，值得注意的是无状态组件无this属性，只是负责展示一个button。
  • 最轻量级的组件，可以简单的用来剪切字符串，转换大小写等简单的小功能。
  • 就是一个render函数，所以没有this
  • 据说有针对性的性能优化
  • 没有生命周期方法，只有在props发生变化时才可以更新UI
  • 无法使用this.xxx

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

• 有状态组件。咱们会从几个点了解有状态组件，分别是state，setState，props，children以及lifecycle(生命周期函数)。
  • state是一组与渲染有关的变量的集合
  • setState(updater[, callback]).
    • updater 可以是一个json，对应着state的变化，也可以是一个函数，提供准确的上下文对象。

    // 当前handelClick每次点击只会加一，因为setState的更新使用了批量更新机制，俩次setState会一起执行，所以解决这个问题需要给setState传递函数对象
    export class Demo extends React.Component {
        constructor(){
            super();
            this.state = {
                count: 0
            }
        }
        handelClick = () => {
            this.setState({
                count: this.state.count + 1
            });
            this.setState({
                count: this.state.count + 1
            })
        }
        render() {
            return (
                <div>
                    <button onClick={this.handelClick}>{this.state.count}</button>
                </div>
            )
        }
    }
    

  • state的最佳实践
    • 只渲染需要的状态，保持state的简洁
    • 可以从props推导的不写
    • 其他状态可以作为函数或者class的属性
    • 理由： 保持代码的简洁，避免不必要的渲染
• 有状态组件
  • 声明方式
    • 函数式
    • React.createClass
    • ES2015-class

    export class Demo extends React.Component {
        static propTypes = {
            name: PropTypes.string
        }
        static defaultProps = {
            name: "Hello Props"
        }
        constructor(props){
            super(props);
            this.state = {
                count: 0
            }
        }
        handelClick = () => {
            this.setState({
                count: this.state.count + 1
            });
            this.setState({
                count: this.state.count + 1
            })
        }
        render() {
            return (
                <div>
                    <h1>{this.props.name}</h1>
                    <button onClick={this.handelClick}>{this.state.count}</button>
                </div>
            )
        }
    }
    

  • props
    • 最好定义propTypes以及defaultProps
    • props最佳实践
      • 简洁的参数提高可测性，可读性，props只用基础数据结构
      • 用props的复杂程度判断是否拆分组件
      • props只读，不允许更改
      • 事件使用统一命名，使用箭头函数声明
  • CHILDREN children可以是任何东西
  • children的几个语法糖
    • React.Children.map 无论children是什么类型都会执行
    • React.Children.count 返回children的length
    • React.Children.toArray 变成数组
• 组件生命周期
  • 初始化：constructor
  • 即将挂载：componentWillMount
  • 挂载：render
  • 挂载完成：componentDidMount
  • 运行时：componentWillRecieveProps(nextProps) shouldComponentUpdate(nextProps, nextState) componentWillUpdate() render() componentDidUpdate(prevProps, prevState)
  • 销毁：componentWillUnmount
  • shouldComponentUpdate 之所以重要是因为无论那种更新，是更新props还是state还是vdom触发更新，都会运行shouldComponentUpdate函数，并且可以阻止渲染，所以它是性能优化的一个点