React组件生命周期与优化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/memedadexixaofeifei/article/details/106378499

1、构造函数中定义的注意事项

在constructor中去调用父类的构造函数、去定义组件中的状态 state、去改变函数方法的this指向（改为指向当前组件）

constructor(props) {
        super(props) // 调用父类的构造函数
        this.state = {
          inputValue: '',
          list:['测试数据']
        }
        this.inputChange = this.inputChange.bind(this) // 改变this指向
        this.addListItem = this.addListItem.bind(this) // 新增内容
    }

2、关于标签中使用注意事项

2.1、一个标签也是一个组件，不指定this指向，那么该组件的方法上的组件就指向当前的这个子组件，如果在constructor中（构造函数）去指定该this为父组件对象，若是直接在子组件的方法上指定this指向，该this就是指子组件对象

2.2、class 类名应该用 className定义

2.3、label标签上的for 应该使用 htmlFor

          <label htmlFor="add">添加服务</label>

2.4、dangerouslySetInnerHTML={{_html:item}} 用于富文本显示

  {
      this.state.list.map((item, index) => {
      // dangerouslySetInnerHTML={{_html:item}} 用于富文本显示
      return (<li key={index} className="item" onClick={ this.delItem.bind(this, index) } dangerouslySetInnerHTML={{__html:item}}></li>)
     })
   }
   </ul>

3.关于存入state数据的setState方法的调用，有两种形式

inputChange(e) {
      // 获取input输入的内容
      
      // 关于state的两种存放方式

      // 直接存入state, 此时 setState方法接受一个参数，json格式
      this.setState({
        inputValue: e.target.value
      })

      // 通过setState的参数方法存入, 此时 setState拥有两个方法， 参数一(方法一)： （prevState）=> ({}) ， 参数二（方法二）: () => {} 用于执行异步操作

      let value = e.target.value
      this.setState((prevState) => ({
        // prevState为 更新前的 state对象
        inputValue: value
      }),() => {
        console.log("异步执行的操作")
      }

      )
    }

4.PropTypes的使用，用于规范父组件传递给子组件的数据类型

import PropTypes from 'prop-types'

// 定义接收的数据类型
ItemList.propTypes = {
    info: PropTypes.string.isRequired,
    index: PropTypes.string,
    handleRemoveInfo: PropTypes.func
}

// 定义数据默认值
ItemList.defaultProps = {
    info: 'hello world!!!'
}

5.ref的使用（获取dom对象，也可以用于获取对象的内容）不建议操作dom，react推崇数据驱动

 <input id="add" value={ this.state.inputValue } placeholder="请输入添加内容" ref={(input) => { this.input = input }} onChange={ this.inputChange }/> <button onClick={ this.addListItem }>添加</button>

 inputChange(e) {
      let value = e.target.value
      this.setState((prevState) => ({
        // prevState为 更新前的 state对象
        inputValue: this.input.value // 操作dom后获取值
      }),() => {
        console.log("异步执行的操作")
     }
   )
 }

6.react生命周期的四个大阶段（生命周期函数，指在某一个时刻组件自定调用执行的函数）

6.1、Initialiation: 初始化阶段 constructor不算生命周期函数，可以看成React的Intialiation阶段，定义属性（props）和状态(state)

6.2、Mounting: 挂载阶段伴随着整个虚拟DOM的生成，其又分为三个小生命周期

6.2.1、componentWillMount：在组件即将被挂载到页面的时刻执行（在页面刷新的时候只执行一次）

6.2.2、render: 页面state或props发生变化时执行

6.2.3、componentDidMount：组件挂载完成时执行（在页面刷新的时候只执行一次）

6.3、Updation: 更新阶段

6.3.1、shouldComponentUpdate：组件更新之前被执行 return true 为统一组件更新 return false 拒绝组件更新

6.3.2、componentWillUpdate：在组件更新之前，但在shouldComponentUpdate之后调用执行

6.3.3、componentDidUpdate：组件更新完成后执行

6.3.4、componentWillReceiveProps：子组件接收到父组件的props时执行（组件第一次存在于Dom中，函数是不会被执行的，如果已经存在与Dom中，函数才会被执行）

6.4、Unmounting: 销毁阶段

6.4.1、componentWillUnmount：组件从页面中删除的时候执行

7、shouldComponentUpdate优化组件性能

shouldComponentUpdate有两个参数： nextProps：变化后的属性 nextState：变化后的状态

shouldComponentUpdate(nextProps, nextState) {
    console.log("是否允许组件更新")
    if(nextProps.context != this.props.context) {
        return true
    }else {
        return false
    }
}

8、react中的动画库 react-transition-group

核心组件：Transition 、CSSTransition、TransitionGroup

import { CSSTransition } from 'react-transition-group'

使用的方法就和使用自定义组件一样,直接写<CSSTransition>，而且不再需要管理className了，这部分由CSSTransition进行管理

render() { 
    return ( 
        <div>
            <CSSTransition 
                in={this.state.isShow}   //用于判断是否出现的状态
                timeout={2000}           //动画持续时间
                classNames="boss-text"   //className值，防止重复
            >
                <div>BOSS级人物-孙悟空</div>
            </CSSTransition>
            <div><button onClick={this.toToggole}>召唤Boss</button></div>
        </div>
        );
}

xxx-enter: 进入（入场）前的CSS样式；
xxx-enter-active:进入动画直到完成时之前的CSS样式;
xxx-enter-done:进入完成时的CSS样式;
xxx-exit:退出（出场）前的CSS样式;
xxx-exit-active:退出动画知道完成时之前的的CSS样式。
xxx-exit-done:退出完成时的CSS样式

.input {border:3px solid #ae7000}

.boss-text-enter{
    opacity: 0;
}
.boss-text-enter-active{
    opacity: 1;
    transition: opacity 2000ms;

}
.boss-text-enter-done{
    opacity: 1;
}
.boss-text-exit{
    opacity: 1;
}
.boss-text-exit-active{
    opacity: 0;
    transition: opacity 2000ms;

}
.boss-text-exit-done{
    opacity: 0;
}

多动画实现 TransitionGroup

import {CSSTransition , TransitionGroup} from 'react-transition-group'

在外层增加<TransitionGroup>标签。

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index+item}  
                >
                    <XiaojiejieItem 
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                    />
                </CSSTransition>
            )
        })
    }
    </TransitionGroup>
</ul>  
<Boss />
</Fragment>

react基础注意事项