image.png
image.png

1.组件挂载

1.1.componentDidMount

组件挂载页面完毕之后调用，并且只调用一次，一般在这个钩子中可以开启定时器，发送网络请求，订阅消息，例如一些开机动画。

1.2.componentWillUnmount

组件将要卸载时候被调用，这个钩子主要做收尾的工作，关闭定时器，取消订阅消息。
案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <script src="../js/react.development.js"></script>
  14.     <script src="../js/react-dom.development.js"></script>
  15.     <script src="../js/babel.min.js"></script>
  16.     <script src="../js/prop-types.js"></script>
  17.     <script type="text/babel">
  18.         class Input extends React.Component {
  19.             state = {
  20.                 opacity: 1
  21.             }
  22.             handleClick = () => {
  23.                 ReactDOM.unmountComponentAtNode(document.getElementById("app"))
  24.             }
  25.             componentDidMount() {
  26.                 let { opacity } = this.state
  27.                 this.timer = setInterval(() => {
  28.                     opacity -= 0.1
  29.                     if (this.state.opacity <= 0) opacity = 1
  30.                     this.setState(
  31.                         { opacity }
  32.                     )
  33.                 }, 200)
  34.             }
  35.             componentWillUnmount() {
  36.                 clearInterval(this.timer)
  37.             }
  38.             render() {
  39.                 return (
  40.                     <div>
  41.                         <h1 style={{ opacity: this.state.opacity }}>点击消失固定</h1>
  42.                         <button onClick={this.handleClick}>确定</button>
  43.                     </div>
  44.                 )
  45.             }
  46.         }
  47.         ReactDOM.render(<Input />, document.getElementById("app"))
  48.     </script>
  49. </body>
  51. </html>

1.3.render

初始化渲染状态更新之后

1.4.componentWillMount

组件将要挂载，在render函数之前执行

2.setState执行

2.1shouldComponentUpdate

控制组件更新的阀门，如果该函数的返回值时false，则不往下执行生命周期钩子，render函数也无法执行，默认不写是true

2.2componentWillUpdate

组件将要更新的钩子

2.3componentDidUpdate

组件更新完毕的钩子

2.4.componentWillUnmount

组件将要卸载时候被调用
案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!DOCTYPE html>
  13.     <html lang="en">
  15.     <head>
  16.         <meta charset="UTF-8">
  17.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.         <title>Document</title>
  20.     </head>
  22.     <body>
  23.         <div id="app"></div>
  24.         <script src="../js/react.development.js"></script>
  25.         <script src="../js/react-dom.development.js"></script>
  26.         <script src="../js/babel.min.js"></script>
  27.         <script src="../js/prop-types.js"></script>
  28.         <script type="text/babel">
  29.             class Son extends React.Component {
  30.                 constructor(props) {
  31.                     console.log("constructor-son")
  32.                     super(props)
  33.                     this.state = {
  34.                         count: 0
  35.                     }
  36.                 }
  37.                 handleClick = () => {
  38.                     ReactDOM.unmountComponentAtNode(document.getElementById("app"))
  39.                 }
  40.                 add = () => {
  41.                     let { count } = this.state
  42.                     count += 1
  43.                     this.setState({
  44.                         count
  45.                     })
  46.                 }
  47.                 //组件是否允许被更改
  48.                 shouldComponentUpdate(){
  49.                     console.log(this)
  50.                     console.log("shouldComponentUpdate-son")
  51.                     return true
  52.                 }
  53.                 //组件将要更新
  54.                 componentWillUpdate(){
  55.                     console.log("componentWillUpdate-son")
  57.                 }
  58.                 //组件更新完毕
  59.                 componentDidUpdate(){
  60.                     console.log("componentDidUpdate-son")
  61.                 }
  62.                 render() {
  63.                     console.log("render-son")
  64.                     let { count } = this.state
  65.                     return (
  66.                         <div>
  67.                             <h1 >这个数字是:{count}</h1>
  68.                             <button onClick={this.handleClick}>确定</button>
  69.                             <button onClick={this.add}>点击加一</button>
  70.                         </div>
  71.                     )
  72.                 }
  73.             }
  74.             ReactDOM.render(<Son/>, document.getElementById("app"))
  75.         </script>
  76.     </body>
  78.     </html>
  79. </body>
  81. </html>

3.forceUpdate

强制更新操作，不更改任何状态下的数据，强制更新一下
调用:this.forceUpdate()

3.1componentWillUpdate

组件将要更新的钩子

3.2 render

初始化渲染，状态更新之后

3.3componentDidUpdate

组件更新完毕的钩子

3.4.componentWillUnmount

组件将要卸载时候被调用

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!DOCTYPE html>
  13.     <html lang="en">
  15.     <head>
  16.         <meta charset="UTF-8">
  17.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.         <title>Document</title>
  20.     </head>
  22.     <body>
  23.         <div id="app"></div>
  24.         <script src="../js/react.development.js"></script>
  25.         <script src="../js/react-dom.development.js"></script>
  26.         <script src="../js/babel.min.js"></script>
  27.         <script src="../js/prop-types.js"></script>
  28.         <script type="text/babel">
  29.             class Son extends React.Component {
  30.                 constructor(props) {
  31.                     console.log("constructor-son")
  32.                     super(props)
  33.                     this.state = {
  34.                         count: 0
  35.                     }
  36.                 }
  37.                  //不改变数据状态，强制更新页面
  38.                 force=()=>{
  39.                   this.forceUpdate()
  40.                 }
  41.                 //组件是否允许被更改
  42.                 shouldComponentUpdate(){
  43.                     console.log(this)
  44.                     console.log("shouldComponentUpdate-son")
  45.                     return false
  46.                 }
  47.                 //组件将要更新
  48.                 componentWillUpdate(){
  49.                     console.log("componentWillUpdate-son")
  51.                 }
  52.                 //组件更新完毕
  53.                 componentDidUpdate(){
  54.                     console.log("componentDidUpdate-son")
  55.                 }
  56.                 render() {
  57.                     console.log("render-son")
  58.                     let { count } = this.state
  59.                     return (
  60.                         <div>
  61.                             <h1 >这个数字是:{count}</h1>
  62.                             <button onClick={this.force}>强制更新</button>
  63.                         </div>
  64.                     )
  65.                 }
  66.             }
  67.             ReactDOM.render(<Son/>, document.getElementById("app"))
  68.         </script>
  69.     </body>
  71.     </html>
  72. </body>
  74. </html>

4.父组件render

4.1 componentWillReceiveProps

子组件将要接受父组件传递的props时调用，这个函数第一次页面渲染不进行调用
一般在接受props的组件中调用，这个钩子执行完，接下来会进行状态改变生命钩子的操作。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <!DOCTYPE html>
  13.     <html lang="en">
  15.     <head>
  16.         <meta charset="UTF-8">
  17.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.         <title>Document</title>
  20.     </head>
  22.     <body>
  23.         <div id="app"></div>
  24.         <script src="../js/react.development.js"></script>
  25.         <script src="../js/react-dom.development.js"></script>
  26.         <script src="../js/babel.min.js"></script>
  27.         <script src="../js/prop-types.js"></script>
  28.         <script type="text/babel">
  29.             class Son extends React.Component {
  30.                 //定义标签类型
  31.                 static propTypes = {
  32.                     color: PropTypes.string.isRequired
  33.                 }
  35.                 //指定默认的标签属性值
  36.                 static defaultProps = {
  37.                     color: "white"
  38.                 }
  39.                 //子组件将要接受父组件传递的props时调用
  40.                 componentWillReceiveProps(props) {
  41.                     console.log(" componentWillReceiveProps-son", props)
  42.                 }
  43.                 //组件是否允许被更改
  44.                 shouldComponentUpdate() {
  45.                     console.log("shouldComponentUpdate-son")
  46.                     return true
  47.                 }
  49.                 //组件将要更新
  50.                 componentWillUpdate() {
  51.                     console.log("componentWillUpdate-son")
  53.                 }
  54.                 //初始化渲染状态更新之后
  55.                 render() {
  56.                     return (
  57.                         <div>
  58.                             <h1>我是子组件，要改变的颜色是：{this.props.color}</h1>
  59.                         </div>
  60.                     )
  61.                 }
  62.                 //组件更新完毕
  63.                 componentDidUpdate() {
  64.                     console.log("componentDidUpdate-son")
  65.                 }
  67.             }
  69.             class Father extends React.Component {
  70.                 state = {
  71.                     color: "blue"
  72.                 }
  73.                 changeColor = () => {
  74.                     if (this.state.color == "blue") {
  75.                         this.setState({
  76.                             color: "red"
  77.                         })
  78.                     }
  79.                     else {
  80.                         this.setState({
  81.                             color: "blue"
  82.                         })
  83.                     }
  84.                 }
  85.                 render() {
  87.                     return (
  88.                         <div>
  89.                             <h1> 我是父组件，改变颜色</h1>     <Son color={this.state.color} />
  90.                             <button onClick={this.changeColor}>修改颜色</button>
  91.                         </div>
  92.                     )
  93.                 }
  94.             }
  96.             ReactDOM.render(<Father />, document.getElementById("app"))
  97.         </script>
  98.     </body>
  100.     </html>
  101. </body>
  103. </html>

5.总结

image.png