React--State & 生命周期

常用生命周期

constructor()

用途： 初始化 props、state，用来写bind this

class Parent entends React.Component{
  constructor(props){
    super(props)
    this.state = { name: 'fanison' }
    this.onClick = this.onClick.bind(this)
  }
  // 新语法
  onClick = ()=> {}
}

shouldComponentUpdate()

用途：

• 返回 true 表示不阻止UI更新
• 返回 false 表示阻止UI更新
• 允许我们手动判断是否要进行组件更新，可以根据应用场景灵活地设置返回值，以避免不必要的更新。

  onClick = () =>{
    // 先加一，再减一； 新对象与旧对象地址不同，会render两次
    this.setState(state => ({n: state.n +1}));
    this.setState(state =>({n: state.n - 1}));
  };
  // 使用  shouldComponentUpdate 对比 nextState和 this.state的每个属性，如果全都相等，就不更新；如果有一个不等，就更新
  shouldComponentUpdate(nextProps,nextState){
    if(nextState.n === this.state.n){
      return false
    }else{
      return true
    }
  }
render(){
    console.log('render了一次')
    return(
      <div>
        {this.state.n}
        <button onClick={this.onClick}>+1-1</button>
      </div>
    )
  }

补充： 大多数情况可以使用 React.PureComponent代替 shouldComponentUpdate()

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

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}));
  };
  render(){
    console.log('render了一次')
    return(
      <div>
        {this.state.n}
        <button onClick={this.onClick}>+1-1</button>
      </div>
    )
  }
}
export default App;

render()

用途：

• 展示视图 return (<div>...</div>)
• 只能有一个根元素
• 如果有两个根元素，要用<React.Fragment>包起来
• <React.Fragment /> 可以缩写成 <></>

//render 里面可以写 if...else
render(){
    let message
    if(this.state.n % 2 === 0 ){
      message = <div>偶数</div>
    }else{
      message = <div>奇数</div>
    }
    return(
      <div>
        {message}
        <button onClick={this.onClick}>+1</button>
      </div>
    )
  }

// render 里面可以写?:表达式
render(){
    return(
      <div>
        {this.state.n % 2 === 0 ? <div>偶数</div>:<span>奇数</span>}
        {this.state.n % 2 === 0 ? <div>偶数</div>:null}
        {this.state.n % 2 === 0 && <div>偶数</div>}
        <button onClick={this.onClick}>+1</button>
      </div>
    )
  }

// render里面不能直接写for循环，需要用数组
render(){
    let result = []
    for(let i=0;i<this.state.array.length;i++){
      result.push(this.state.array[i])
    }
    return(
      <div>
        {result}
      </div>
    )
  }

// render里面可以写 array.map(循环)
render(){
    return(
      <div>
        {this.state.array.map(n=><span key={n}>{n}</span>)}
      </div>
    )
  }

componentDidMount() 组件已出现在页面

用途：

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

class App extends React.PureComponent{
  constructor(props) {
    super(props);
    this.state = {
      width:undefined
    };
    this.divRef = React.createRef();
  }

componentDidMount(): void {
  const div = document.getElementById('xxx')
  console.log(div)
  const width = div.getBoundingClientRect().width
  this.setState({width:width})
  // 使用 divRef.current
  const div2 = this.divRef.current
  console.log(div2)
  const {width} = div2.getBoundingClientRect()
  this.setState({width:width})
}

 render(){
   return(
     <>
      <div id="xxx"> GetElementById: {this.state.width} px </div>
      <div ref={this.divRef}>Hello,World {this.state.width} px </div>
     </>
   )
 }

componentDidUpdate() //组件已更新

componentWillUnmount() //组件将死