React 生命周期和API 使用

一.生命周期

1.创建阶段

1. 创建时(挂载阶段)

• 执行时机:组件创建时 (页面加载时)

钩子函数	触发时机	作用
constructor	创建组件时,最先执行	1.初始化state 2.为事件处理程序绑定this
render	每次组件渲染都会触发	渲染UI(注意:不能调用setState)
componentDidMount	组件挂载后(DOM渲染完成)	1.可以进行网络请求 2.DOM操作

class Comp extends React.Component {
  constructor(props){
    super(props)
    console.log('constructor')   // 第一步
  }
  componentDidMount(){
    // let title = document.getElementById('title')
    // console.log(title)
    console.log('componentDidMount')  // 第三步
  }
  render() {
    console.log('render')  // 第二步
    return (
      <div>
        <li id="title">111111</li>
      </div>
    )
  }
}

2.更新阶段

• 执行时机: 1. setState() 2.forceUpdate() 3.组件接收到新的props
• 以上三者如果有任意一种变化,组件就会重新渲染
• 执行顺序

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI
componentDidUpdate	组件更新后(完成DOM渲染)	1.发送网络请求 2.DOM操作 注意:setState() 必须放在一个 if 条件中

componentDidUpdate(perprops){
    console.log(perprops,this.state.count)
    if(perprops !== this.props){
      this.setState({})
    }
}

3.卸载阶段

• 执行时机:组件从页面中消失

钩子函数	触发时机	作用
componentWillUnmount	组件卸载(从页面中消失)	执行清理(比如:清除定时器等)

二.React 的API 使用

1.pureComponent

• 好处:用于避免重复渲染（执行render函数），提高效率
• React.PureComponent 主要用于性能的提高
• React中一般继承的是Component，但是Component中无论state还是prop更新，都会重新调用render方法更新，这样在某些时候比较浪费，于是有了个PureComponent，相比Component，可以在某些不必要的是时候不更新。

1. PureComponent和Component区别

• 实际上PureComponent是一个实现了shouldComponentUpdate方法的Component，shouldComponentUpdate方法决定了一个组件是否允许重新渲染。PureComponent实现了“浅比较”，即如果内容没变，或者第一层的地址没变，那就不会更新，具体的实现代码如下：

class Hello3 extends React.PureComponent {
  state = {
    list: ['第一个', '第二个', '第三个'],
    name: '小明'
  }
  render() {
    let {name,list} = this.state
    return (
      <div>
        <h1>{name}</h1>
        <ul>
          {list.map((item, index) => {
            return <li key={index}>{item}</li>
          })}
        </ul>
        <button onClick={() => {
          this.setState({
            name: '大明'
          })
        }}>升级</button>
        <button onClick={() => {
          list.push('点击添加')
          this.setState({
            // list: [...list,]   // 可以添加
            list   // 不能添加
          })
        }}>点击添加</button>
      </div>
    )
  }
}

2.ref 获取DOM元素

• 旧版: ref
• 主流: createRef() 缺点:写几个就需要创建几个
• 注意点: 在 组件挂载完成之后及更新之后使用

// 新版方式
class Comp extends React.Component {
  box = createRef()   // 第一步
  // 挂载完成之后
  componentDidMount(){
    // 第三步   获取
    console.log(this.box.current)   // 获取到DOM元素
  }
  render() {
    return (
      <div>
       // ref={this.box}   第二步
        <li id="title" ref={this.box}>111111</li>
      </div>
    )
  }
}
// 旧版方式
class Comp extends React.Component {
  // 挂载完成之后
  componentDidMount(){
    console.log(this.refs.list)   // 获取到DOM元素
  }
  render() {
    return (
      <div>
        <li id="title" ref='list'>111111</li>
      </div>
    )
  }
}

3.children

• React 有一个特殊的属性children, 主要用于组件需要渲染内容
• 组件标签对之间的内容会被当做一个特殊的属性props,children传入组件内容
• children的内容可以是字符串，函数，,数组，undefined ， null， Boolean

children 最简单的使用场景就是一个组件中直接写this.props.children,调用这个组件的时候，再具体写内容。这里要注意的是组件调用方式，.例如下面示例包含children的组件叫Child, 那么调用的时候，就要在Child组件两个标签之间写内容
<Child><h1>哈哈哈哈哈</h1></Child>, 只有这样'<h1>哈哈哈哈哈</h1>'才会被Child组件中的children 获取到

class Child extends React.Component {
    render() {
        let {children} = this.props;
        console.log(children)
        return (
            <div>{children}</div>
        )
    }
}
class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child>
                    <h1>哈哈哈哈哈</h1>
                    [
                        '中午','下午'
                    ]
                </Child>
            </div>
        )
    }
}

4.react属性dangerouslySetInnerHTML

• 直接设置标签的 html
• 一般在react项目有个需求要将后台返回的字符串(字符串中可能包含标签)。在vue中有v-html可以轻松的插入。在react中也提供了一个属性可以帮我们将dom字符串转化为dom节点,这个属性就是：dangerouslySetInnerHTML
• 方法如下:

let a = '<h1>嘿嘿嘿嘿嘿</h1><p>下午了</p>'
class Parent extends React.Component {
    render() {
        return (
            <div dangerouslySetInnerHTML={{
                __html:a
            }}>
                
            </div>
        )
    }
}

5.关于 key 的问题

• Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此应当给数组中的每一个元素赋予一个确定的标识

1. 用index作为key可能会引发的问题:

• 若对数据进行添加、删除等顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
• 注意点:如果不存在对数据的添加、删除等操作， 仅用于渲染列表用于展示，使用index作为key是可以的。

2. 正确的选择key

• 可以使用每条数据的唯一标识作为key,比如id等
• 如果我们只是简单的展示数据,用index也是可以的

总结:以上就是今天所学的生命周期的三个阶段,还有React 的常用API 使用