React组件

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

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

function Square(props) {  return (          {props.value}      );}复制代码

• 有状态组件。咱们会从几个点了解有状态组件，分别是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 (            
            
                    
             {this.state.count}            
            
            )    }}复制代码

  • 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 (            
            
                    
             
    {this.props.name}
                    
             {this.state.count}            
            
            )    }}复制代码

  • props
    • 最好定义propTypes以及defaultProps
    • props最佳实践
      • 简洁的参数提高可测性，可读性，props只用基础数据结构
      • 用props的复杂程度判断是否拆分组件
      • props只读，不允许更改
      • 事件使用统一命名，使用箭头函数声明
  • CHILDREN children可以是任何东西
    • children的几个语法糖
      • React.Children.map 无论children是什么类型都会执行
      • React.Children.count 返回children的length
      • React.Children.toArray 变成数组