class组件全解

class组件的创建方式：

• ES5已经过时了

const A = React.createClass({
    render(){
      return(
      
      )
    }

})

// 该方法因为ES5不支持class才会这样创建，

• ES6 推荐写法

class B extends React.Component{
      constructor(){
        super()
      }
  render(){
    rteturn(
    
    )
  }
}

exprot default B

 

如果浏览器不支持ES6，那么只能通过webpack+babel来转译成ES5来使用。

Props

// 传递
<B msg="xxx" />
<B msg={xxx} />

class B extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div>{this.props.name}</div>
    }
//通过 this.props.xxx读取

注意：Props传来的外部数据永远不允许修改，只能通过外部数据修改

 

State

初始化 State

constructor(props) {
    super(props);
    this.state = {
        user: { name: 'frank', age: 18 }
    }
}
render() { /* ... */ }

读

this.state.xxx

写

this.setState(state =>{
  /* ... */
})

---

生命周期：函数列表

• 绿色 常用
• 白色 暂时用不到

constructor

用途：

• 初始化props
• 初始化state，但此时不能调用 setState 初始化
• 也可以用来写 bind this 

constructor(){
    /* */
    this.onClick = this.onClick.bind(this)
}

新语法代替
onClick = () => { }
constructor(){ /* */ }

shouldComponentUpdate

用途：

• 返回 ture 表示不阻止UI更新
• 返回 false 表示阻止UI更新

 常用于判断数据是否需要更新，例如 n 的数据没变但是React还是重新渲染了，因为n的地址变了，这个时候可以使用这个生命周期来判断

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            n: 1
        }
    }
    onClick = () => {
        this.setState(state => ({
            n: state.n + 1
        }))
        this.setState(state => ({
            n: state.n - 1
        }))
    };

    // shouldComponentUpdate(newProps,newStart){ //来阻止render更新，如果值没有变化，就不用改变了
    //     if(newStart.n === this.state.n){
    //         return false
    //     }else{
    //         return true
    //     }
    // }

    render() {
        console.log('render更新了一次')
        return (
            <div>
                App
                <div>
                    {this.state.n}
                    <button onClick={this.onClick}>+1</button>
                </div>
            </div>
        )
    }
}

export default App;

其他方法：手动对比很麻烦，只要我们在类开头加上 class Son extends React.PureComponent  加上一个 Pure 即可，这样就变成一个纯组件，它会自动帮我们对比

1、PureComponent 会在 render 之前对比新 state 和旧 state 的每一个 key，以及新 props 和旧 props 的每一个 key。
2、如果所有 key 的值全都一样，就不会 render；如果有任何一个 key 的值不同，就会 render。

 

render

用途：

• 展示视图
• 只能有一个根视图，如果需要两个则需要 <React.Fragment> 包裹起来，可以使用 <>...</> 简化

技巧：

• 可以写 if else 
• 可以写 map

 

componentDidMount

用途：

• 在元素插入页面后执行代码，这些代码依赖DOM
• 在此处可以发起加载数据的AJAX请求
• 首次渲染会执行此钩子

 

componentDidUpdate

用途:

• 在视图更新后执行代码
• 此处也可以发起AJAX请求，用于更新数据
• 首次渲染不会执行该钩子
• 此处setState可能会引起无限循环
• 使用 shouldComponentUpdate 返回false则不会触发该钩子

componentWillUnmount

用途：

• 组件将要被移除页面后然后被销毁时执行代码
• unmount过的组件不会再次mount

距离：

在组件将要消失时取消监听

在组件将要消失时取消AJAX

总结：发起长期有效的请求去取消