react（尚硅谷）04-生命周期函数（新旧），父子组件，getDrivedStateFromProps，getSnapshotBefore，生命周期总结，dom的diffing算法

最新推荐文章于 2022-07-31 22:25:59 发布

心湖中的石子

最新推荐文章于 2022-07-31 22:25:59 发布

阅读量488

点赞数

分类专栏： React 文章标签： react.js 算法前端

本文链接：https://blog.csdn.net/weixin_43745804/article/details/121061985

版权

React 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1、生命周期的一个例子引出生命周期函数（钩子函数）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <title>Life</title>
</head>
<body>
<div id="app">

</div>

<script type="text/babel">
  //创建类组件
  class Life extends React.Component{
    state={
      opacity: 1
    }
    removeDom=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('app'))
    }

    componentDidMount(){
      this.timer=setInterval(()=>{
        //获取state的opacity值并判断大小进而修改
        let {opacity}=this.state
        if (opacity<=0){
          opacity=1
        }else{
          opacity-=0.1
        }
        this.setState({opacity:opacity})
      },200)
    }

    componentWillUnmount(){
      clearInterval(this.timer)
    }
    render (){
      return(
        <div>
          <h2 style={{opacity:this.state.opacity}}>react学不会怎么办</h2>
          <button onClick={this.removeDom}>删除节点</button>
        </div>
      )
    }
  }


  //渲染类组件
  ReactDOM.render(<Life/>,document.getElementById('app'))

</script>

</body>
</html>

2、生命周期钩子(旧)

construct()
componentWillMount()
componentDidMount()
render()
componentDidUnMount()

父组件render
componentWillRceiveProps（）
shouldComponentUpdate（）
componentWillUpdate（）
componentDidUpdate（）
在这里插入图片描述

4、父子组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <title>Life</title>
</head>
<body>
<div id="app">

</div>

<script type="text/babel">
  //创建类组件
  class Father extends React.Component{
    state={
      carName:'丰田'
    }

    changeCar=()=>{
      this.setState({carName:'奔驰'})
    }

    render(){
      return (
        <div>
          <h1>我是父亲组件</h1>
          <button onClick={this.changeCar}>换车</button>
          <Son carName={this.state.carName}/>
        </div>
      )
    }
  }

  class Son extends React.Component{

    render(){
      return(
        <p>您现在的座驾是{this.props.carName}</p>
      )
    }
  }

  //渲染类组件
  ReactDOM.render(<Father/>,document.getElementById('app'))

</script>

</body>
</html>

5、生命周期总结(旧)

1. 初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
componentWillMount()
render()
componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()

6、生命周期钩子(新)

在这里插入图片描述

7、getDrivedStateFromProps钩子

不必过分了解，罕见状态，略

8、getSnapshotBeforeUpdate钩子

传递三个参数，一个是preprops，一个是prestate，一个是snaopshotValue，也就是更新前的快照
一个例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <style type="text/css">
    .news{
      line-height: 30px;
      background-color: bisque;
    }
    .newsContainer{
      width: 200px;
      height: 200px;
      background-color: aqua;
      overflow: auto;
    }
  </style>
  <title>Life</title>
</head>
<body>
<div id="app">

</div>

<script type="text/babel">
  //创建类组件
  class NewsList extends React.Component{
    state={
      newsArray:[]
    }

    componentDidMount(){
      setInterval(()=>{
        const {newsArray}=this.state
        let oneNews='新闻'+(newsArray.length+1)
        this.setState({newsArray: [oneNews,...newsArray]})
      },1000)
    }

    getSnapshotBeforeUpdate(){
      return this.refs.list.scrollHeight
    }

    componentDidUpdate(preProps,preState,height){
      this.refs.list.scrollTop+=this.refs.list.scrollHeight-height
    }

    render(){
      return (
        <div className="newsContainer" ref="list">
          {
             this.state.newsArray.map((item,index)=>{
               return <div className="news" key={index}>{item}</div>
            })
          }
        </div>
      )
    }
  }


  //渲染类组件
  ReactDOM.render(<NewsList/>,document.getElementById('app'))

</script>

</body>
</html>

9、生命周期总结

生命周期的三个阶段（新）
1. 初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
getDerivedStateFromProps
render()
componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

getDerivedStateFromProps
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate
componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
10. componentWillUnmount()

重要的勾子

render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

componentWillMount
componentWillReceiveProps
componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

10、dom的diffing算法

一个时间更新小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <style type="text/css">
    .news{
      line-height: 30px;
      background-color: bisque;
    }
    .newsContainer{
      width: 200px;
      height: 200px;
      background-color: aqua;
      overflow: auto;
    }
  </style>
  <title>Life</title>
</head>
<body>
<div id="app">

</div>

<script type="text/babel">
  //创建类组件
  class Time extends React.Component{
    state={
      date:new Date()
    }

    componentDidMount(){
      setInterval(()=>{
        this.setState({
          date:new Date()
        })
      },1000)
    }


    render(){
      return (
        <div>
          <h1>hello</h1>
          <input type="text"/>
          <span>现在是：{this.state.date.toTimeString()}</span>
        </div>
      )
    }
  }


  //渲染类组件
  ReactDOM.render(<Time/>,document.getElementById('app'))

</script>

</body>
</html>