react学习---生命周期学习和refs

Posted 2020-10-09 RunningAndRunning

     写react组件的时候，我们写的都是jsx文件，那jsx到页面渲染成功这个过程发生了什么呢？

     首先通过react和babel编译将jsx转化为javascript对象，react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

生命周期

    挂载阶段的 生命周期：

1. componentWillMount   组件挂载开始之前，也就是render之前调用这个生命周期钩子
2. componentDidMount   组件挂载完成以后，也就是 DOM 元素已经插入页面后调用。
3. componentWillUnmount 组件对应的 DOM 元素从页面中删除之前调用。

   更新阶段的生命周期：

         更新阶段也就是通过setState改变数据，导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程。这是一个组件更新的过程

1. shouldComponentUpdate(nextProps, nextState)     通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用
2. componentWillReceiveProps(nextProps)  组件从父组件接收到新的props之前调用
3. componentWillUpdate   组件开始重新渲染之前调用
4. componentDidUpdate   组件重新渲染并且把更改变更到真实的 DOM 以后调用

ref和react中的DOM操作

     虽然在react中，数据驱动，避免了大多数的DOM操作，但有时候我们不的不操作DOM操作，react中只要加入ref属性，就可操作DOM

class AutoFocusInput extends Component {
  componentDidMount () {
    this.input.focus() // 通过this.input即可获取到这个input元素
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}

ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById(‘root‘)
)