10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景

一. ref 的使用 ( 直接获取 DOM 元素 )

　　在 input 标签上 可以使用 ref 属性 获取当前DOM节点

　　eg:

　　　　import React , { Component, Fragment } from 'react';

　　　　class MyComponent extends Component {

　　　　　　constructor(props){

　　　　　　　　super(props);

　　　　　　　　this.handleInput = this.handleInput.bind(this);

　　　　　　　　this.state = { arr = [] }

　　　　　　}

　　　　　　render(){

　　　　　　　　return (

　　　　　　　　　　<Fragment>

　　　　　　　　　　// input 为当前的 DOM 节点 将 this.input 指向该节点 方便引用 相当于 e.target

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

　　　　　　　　　　<button onClick={this.handleInput}>提交</button>

　　　　　　　　　　</Fragment>

　　　　　　　　)

　　　　　　}

　　　　　　handleInput(){

　　　　　　　　console.log(this.input.value);

　　　　　　　　this.setState((prevProp)=>({

　　　　　　　　　　arr : [...prevProp.arr, this.input.value]

　　　　　　　　}), ()=>{

　　　　　　　　　　// 该段代码 为异步操作 ( setState ) 之后执行的代码

　　　　　　　　　　console.log(this.state.arr.length)

　　　　　　　　})

　　　　　　}

　　　　}

　　　　export default MyComponent;

二.  React 生命周期函数

　　生命周期函数是指在某一个时刻组件会自动调用执行的函数

　　1. Initialization　　初始化

　　　　设置 props 和 state

　　　　// 因为所有的 类内部都有 该方法 并不是 react 的生命周期函数

　　　　constructor(props){

　　　　　　super(props);

　　　　　　this.status = {  }

　　　　}

　　2. Mounting　　挂载

　　　　// 在组件即将被挂载到页面的时刻自动执行 (挂载前)

　　　　// 16.3 将 componentWillMount 更名为 UNSAFE_componentWillMount

　　　　// 17.* 将 删除 componentWillMount

　　　　componentWillMount(){

　　　　　　console.log('componentWillMount');

　　　　}

　　　　// 渲染页面

　　　　render(){

　　　　　　console.log('render')

　　　　}

　　　　// 在组件被挂载到页面后自动执行 (挂载后)

　　　　componentDidMount(){

　　　　　　console.log('componentDidMount')

　　　　}

　　3. updation　　数据更新

　　　　props 更新

　　　　　　// 当一个组件 从父组件接受了参数

　　　　　　// 子组件 第一次 出现在父组件中 不会被执行

　　　　　　// 子组件 第一次后 出现在父组件中 会被执行

　　　　　　// 16.3 将 componentWillReceiveProps 更名为 UNSAFE_componentWillReceiveProps

　　　　　　// 17.* 将 删除 componentWillReceiveProps

　　　　　　componentWillReceiveProps(){

　　　　　　　　console.log('child componentWillReceiveProps');

　　　　　　}

　　　　props 和 state 共同更新执行的生命周期函数

　　　　　　// 组件被更新前，会自动执行 判断是否更新  返回 bool 类型的结果 true 为 更新 (后面的函数会执行)  false 为不更新 (则后面的函数不会执行)

　　　　　　shouldComponentUpdate(){

　　　　　　　　console.log('sholdComponentUpdate');

　　　　　　　　return true;

　　　　　　}

　　　　　　//  组件被更新前，会自动执行

　　　　　　// 16.3 将 componentWillUpdate 更名为 UNSAFE_componentWillUpdate

　　　　　　// 17.* 将 删除 componentWillUpdate

　　　　　　componentWillUpdate(){

　　　　　　　　console.log('componentWillUpdate');

　　　　　　}

　　　　　　// 渲染更新的 组件

　　　　　　render(){

　　　　　　　　console.log('render');

　　　　　　}

　　　　　　// 组件被更新之后 自动执行

　　　　　　componentDidUpdate(){

　　　　　　　　console.log('componentDidUpdate');

　　　　　　}

　　4. Unmounting　　把组件去除

　　　　// 将把组件从页面中剔除前执行 （去除挂载前）子组件 方法

　　　　componentWillUnmount(){

　　　　　　console.log('child componentWillUnmount');

　　　　}

　　　　

三. 生命周期函数使用场景

　　1. 除了 render 函数 其他的生命周期函数都可以不存在

　　　　// 原因 继承 Component 时 除了 render 函数 其他函数都有 默认函数支持

　　　　// 所以要自定义编写 render 函数

　　2. 当每次 state 改变时 render 函数都要被执行

　　　　render 函数执行 会导致 子组件会被重新渲染

　　　　但 只有特定条件下 state 的 值才有用 所以 使用

　　　　shouldComponentUpdate 进行 代码优化 组织

　　　　// 在子组件内编写

　　　　// 获取将要变化的 props 和 state -- nextProps 和 nextState

　　　   shouldComponentUpdate(nextProps, nextState){

　　　　　　// 如果 下次传递过来渲染的值 不等于 上次的值则渲染 反之 不渲染

　　　　　　return nextProps.value !== this.props.value;

　　　　}

　　3. 使用 获取远程数据 作为 基础数据时 使用 componentDidMount (挂载好后获取数据)

　　　　componentDidMount(){

　　　　　　this.ajax().then((res)=>{

　　　　　　})

　　　　}

　　4. 发送 ajax 请求 时 使用

　　　　安装 axios

　　　　　　yarn add axios

　　　　使用 axios

　　　　　　import axios from 'axios';

　　　　　　componentDidAount(){

　　　　　　　　axios.get('/api/xxx')

　　　　　　　　　　.then(()=>{alert('succ')})

　　　　　　　　　　.catch(()=>{alert('err')})

　　　　　　}