React核心技术-精讲---第三天的讲解(03-React进阶篇-框架原理)

川长思鸟来 2022-01-31 03:13 144阅读 0赞

组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程;

如果能够做到知其然且知其所以然,  那么在后期多组件、中大型项目开发过程中,  就能够很好的把控项目的性能细节。

# 1.生命周期 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="app"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      class Life extends React.Component{
        //1.初始化
        constructor(props){
          super(props);
          console.log('constructor(props)');
        }
        componentWillMount(){
          console.log('componentWillMount');
        }
        render(){
          console.log('render');
          return(
            <div>
              <h1>hello</h1>
            </div>
          )
        }
        componentDidMount(){
          console.log('componentDidMount');
        }
        //2.更新阶段
        componentWillUpdate(){
          console.log('componentWillUpdate');
        }
    
        componentDidUpdate(){
          console.log('componentDidUpdate');
        }
    
    
    
        //3.卸载阶段
        componentWillUnmount(){
          console.log('componentWillUnmount');
        }
    
        //4.错误处理
        componentWillCatch(){
          console.log('componentWillCatch');
        }
      }
    
      ReactDOM.render(
        <Life/>,
        document.getElementById('app')
      )
    </script>
    </body>
    </html>

# 2.全面能运用到钩子函数的方式 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <div id="app"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      class Life extends React.Component{
        //1.初始化
        constructor(props){
          super(props);
          console.log('constructor(props)');
          //初始化状态
          this.state={
            age:1
          }
        }
        componentWillMount(){
          console.log('componentWillMount');
        }
        render(){
          console.log('render');
          return(
            <div>
              <h1>我是树妖，我今年{this.state.age}岁</h1>
              <button onClick={()=>ReactDOM.unmountComponentAtNode(document.getElementById('app'))}>我被砍了</button>
            </div>
          )
        }
        componentDidMount(){
          console.log('componentDidMount');
          //开启定时器
          this.intervalId = setInterval(()=>{
            // console.log('定时器');
            //更新状态
            this.setState({
              age:this.state.age+1
            })
          },1000)
        }
        //2.更新阶段
        componentWillUpdate(){
          console.log('componentWillUpdate');
        }
    
        componentDidUpdate(){
          console.log('componentDidUpdate');
        }
    
    
    
        //3.卸载阶段
        componentWillUnmount(){
          console.log('componentWillUnmount');
          //清除定时器
          clearInterval(this.intervalId);
        }
    
        //4.错误处理
        componentWillCatch(){
          console.log('componentWillCatch');
        }
      }
    
      ReactDOM.render(
        <Life/>,
        document.getElementById('app')
      )
    </script>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 4][]

## 1）constructor(props) ##

a. react组件的构造函数, 在挂载之前被调用。在实现React.Component构造函数时，需要先在添加其他内容前，调用super(props)，用来将父组件传来的props绑定到这个类中，使用this.props将会得到。

b.  constructor中应当做些初始化的行为，如：初始化state，将事件处理函数绑定到类实例上，但不要使用setState()。如果没有必要初始化state或绑定方法，则不需要构造constructor，或者把这个组件换成纯函数写法。

c.  可以利用props初始化state，在之后修改state不会对props造成任何修改，但仍然建议提升状态到父组件中，或使用redux统一进行状态管理。

d.  官方建议不要在constructor引入任何具有副作用和订阅功能的代码，这些应当在componentDidMount()中写入。

## 2）getDerivedStateFromProps(nextProps, prevState) ##

a.  getDerivedStateFromProps在组件实例化后，或者接受新的props后被调用。他返回一个对象来更新状态，或者返回null表示新的props不需要任何state的更新。

b.  如果是由于父组件的props更改，所带来的重新渲染，也会触发此方法。调用steState()不会触发getDerivedStateFromProps()。

## 3）componentWillMount() / UNSAFE\_componentWillMount() ##

a.  componentWillMount()将在react未来版本中被弃用; UNSAFE\_componentWillMount()在组件挂载前被调用，在这个方法中调用setState()不会起作用，因为它在render()前被调用。

b.  为了避免副作用和其他的订阅，官方建议使用componentDidMount()代替。这个方法也是用于在服务器渲染上的唯一方法。

## 4）render() ##

render()方法是必需的。当被调用时，将计算this.props和this.state，并返回以下一种类型：

a) React元素, 通过jsx创建，既可以是dom元素，也可以是用户自定义的组件。

b) 字符串或数字, 他们将会以文本节点形式渲染到dom中。

c) Portals, react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置。

d) null, 什么也不渲染。

e) 布尔值, 也是什么都不渲染，通常后跟组件进行判断。

f)  当返回null,false,ReactDOM.findDOMNode(this)将会返回null，什么都不会渲染。

注意: render()方法必须是一个纯函数，不能在里面改变state，也不能直接和浏览器进行交互，而是应该将事件放在其他生命周期函数中。 如果shouldComponentUpdate()返回false，render()不会被调用。

# 5）componentWillReceiveProps() #

a.  官方建议使用getDerivedStateFromProps函数代替componentWillReceiveProps()。

b.  当组件挂载后，接收到新的props后会被调用。如果需要更新state来响应props的更改，则可以进行this.props和nextProps的比较，并在此方法中使用this.setState()。如果父组件会让这个组件重新渲染，即使props没有改变，也会调用这个方法。

c.  react不会在组件初始化props时调用这个方法,  调用this.setState也不会触发。

# 6）shouldComponentUpdate(nextProps, nextState) #

a.  调用shouldComponentUpdate, 可以让react知道组件的输出是否受state和props的影响。默认每个状态的更改都会重新渲染，大多数情况下应该保持这个默认行为。在渲染新的props或state前，shouldComponentUpdate会被调用, 默认为true。这个方法不会在初始化时被调用，也不会在forceUpdate()时被调用。返回false不会阻止子组件在state更改时重新渲染。

b.  如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。

# 7）UNSAFE\_componentWillUpdate(nextProps, nextState) #

在渲染新的state或props时，UNSAFE\_componentWillUpdate会被调用，将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。不能在这里使用this.setState()，也不能做会触发视图更新的操作。如果需要更新state或props，调用getDerivedStateFromProps。

# 8）getSnapshotBeforeUpdate() #

在react render()后的输出被渲染到DOM之前被调用。它让组件能够在它们被潜在更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate()。

# 9）componentDidUpdate(prevProps, prevState, snapshot) #

如果shouldComponentUpdate()返回false，componentwillupdate,render和componentDidUpdate不会被调用。在未来版本，shouldComponentUpdate()将会作为一个提示而不是严格的指令，返回false仍然可能导致组件的重新渲染。官方并不建议在shouldComponentUpdate()中进行深度查询或使用JSON.stringify()，他效率非常低，并且损伤性能。

运用了生命周期函数，写了一个案例

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        .box {
          width: 320px;
          height: 600px;
          background: url("images/bg.jpg") no-repeat;
          margin: 30px auto;
        }
    
        .top {
          height: 60px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
    
        .top button {
          border: none;
          width: 100px;
          height: 36px;
          border-radius: 5px;
          color: #fff;
        }
    
        .top button:first-child {
          background-color: orange;
        }
    
        .top button:last-child {
          background-color: orangered;
        }
    
        .bottom {
          width: 96%;
          height: 70%;
          margin-top: 15px;
          background-color: transparent;
          position: relative;
          margin-left: 2%;
        }
    
        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: absolute;
        }
    
        span {
          font-size: 12px;
        }
      </style>
    </head>
    <body>
    
    <div id="app"></div>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      class FlexView extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            //购物车数组
            shopArr: []
          }
    
        }
    
        static defaultProps = {
          dataArr: [
            {
              "icon": "f1",
              "name": "撩课-番茄"
            },
            {
              "icon": "f2",
              "name": "撩课-苹果"
            },
            {
              "icon": "f3",
              "name": "撩课-水蜜桃"
            },
            {
              "icon": "f4",
              "name": "撩课-香蕉"
            },
            {
              "icon": "f5",
              "name": "撩课-蓝莓"
            },
            {
              "icon": "f6",
              "name": "撩课-菠萝"
            },
            {
              "icon": "f7",
              "name": "撩课-草莓"
            },
            {
              "icon": "f8",
              "name": "撩课-猕猴桃"
            },
            {
              "icon": "f9",
              "name": "撩课-橙子"
            }
          ]
        }
    
        render(){
          return (
            <div className="box">
              {/*上部分*/}
              <div className="top">
                <button onClick={()=>this._handleAdd()}>Add</button>
                <button onClick={()=>this._handleRemove()}>Remove</button>
              </div>
              {/*下部分*/}
              <div className="bottom">
                {this.state.shopArr}
              </div>
            </div>
          )
        }
    
        _handleAdd() {
          // alert('1')
          // 1. 相关的变量
          const cols = 3, shopW = 100, shopH = 120, width = 320, height = 420;
          // 2. 取出数据
          const {dataArr} = this.props;
          // 3. 取出下标
          const index = this.state.shopArr.length;
          if(index >= 9){
            alert('已经买了很多水果，不能再买了~');
            return;
          }
          // 4. 求出子组件的行和列
          const row = Math.floor(index / cols);
          const col = Math.floor(index % cols);
          console.log(row, col);
    
          // 5. 求出当前的盒子的left和top
          const xSpace = (width - cols * shopW) / (cols - 1);
          const ySpace = (height - 3 * shopW) / 2;
    
          const left = col * (shopW + xSpace);
          const top = row * (shopH + ySpace);
          // 6. 创建子组件装入数组
          const shopView = (
            <div className="item" style={
       {left, top}} key={index}>
              <img src={'images/' + dataArr[index].icon + '.png'}
                   style={
       {width: shopW * 0.8, height:shopW*0.8}}/>
              <span>{dataArr[index].name}</span>
            </div>
          );
    
    
          // 7. 更新状态
          const tempArr = this.state.shopArr;
          tempArr.push(shopView);
          this.setState({
            shopArr: tempArr
          })
    
        }
    
        _handleRemove() {
          // alert('2')
          const tmpArr = this.state.shopArr;
          if (tmpArr.length === 0){
            alert('没有了~');
            return;
          }
          tmpArr.pop();
          this.setState({
            shopArr:tmpArr
          })
    
    
        }
      }
    
      ReactDOM.render(
        <FlexView/>,
        document.getElementById('app')
      )
    </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20220131/cae9d235279541f498b8103dae16297e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20220131/1df8883774544e8fb9434852e03b1bef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20220131/5f80eb3af4584ba2ad6e5fbaa295a867.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 3]: /images/20220131/27cb20aadfdc400ca27005f0d8cd4ec2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l0d2FuZ3lhbmc1MjA_size_16_color_FFFFFF_t_70 4]: /images/20220131/cd06c0b6febe428a955a5997530ffbb1.png