image.png

1.getDerivedStateFromProps

返回状态对**象或者null,**返回状态对象不以state为主,state所有时刻都取决于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.                 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.              //返回状态对象不以state为主,state所有时刻都取决于props,横跨挂载和更新
  42.                 static getDerivedStateFromProps(props,state) {
  43.                     console.log("getDerivedStateFormProps",props,state);
  44.                     return props
  45.                 }
  46.                 componentDidMount() {
  47.                     console.log("componentDidMount");
  48.                 }
  49.                 //组件是否允许被更改
  50.                 shouldComponentUpdate() {
  51.                     console.log(this)
  52.                     console.log("shouldComponentUpdate-son")
  53.                     return true
  54.                 }
  55.                 // //组件将要更新
  56.                 // componentWillUpdate() {
  57.                 //     console.log("componentWillUpdate-son")
  59.                 // }
  60.                 //组件更新完毕
  61.                 componentDidUpdate() {
  62.                     console.log("componentDidUpdate-son")
  63.                 }
  64.                 render() {
  65.                     console.log("render-son")
  66.                     let { count } = this.state
  67.                     return (
  68.                         <div>
  69.                             <h1 >这个数字是:{count}</h1>
  70.                             <button onClick={this.force}>强制更新</button>
  71.                         </div>
  72.                     )
  73.                 }
  74.             }
  78.             ReactDOM.render(<Son name="王苏" />, document.getElementById("app"))
  79.         </script>
  80.     </body>
  82.     </html>
  83. </body>
  85. </html>
  1. 作用：将props映射到state
  3. static getDerivedStateFromProps(nextProps,prevState){
  4.   const {type}=nextProps;
  6. if(type!=prevState.type){ // 当传入的type发生变化时，更新state
  8.    return {type}
  10.  }
  12. return null  //否则，对state不进行处理
  14. }

2. getSnapshotBeforeUpdate

  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.                 add=()=>{
  43.                     let {count}=this.state
  44.                     count+=1
  45.                     this.setState({
  46.                         count
  47.                     })
  48.                 }
  49.              //返回状态对象不以state为主,state所有时刻都取决于props,横跨挂载和更新
  50.                 static getDerivedStateFromProps(props,state) {
  51.                     console.log("getDerivedStateFormProps",props,state);
  52.                     return props
  53.                 }
  54.                 componentDidMount() {
  55.                     console.log("componentDidMount");
  56.                 }
  57.                 //组件是否允许被更改
  58.                 shouldComponentUpdate() {
  59.                     console.log(this)
  60.                     console.log("shouldComponentUpdate-son")
  61.                     return true
  62.                 }
  64.                 getSnapshotBeforeUpdate(){
  65.                     console.log("getSnapshotBeforeUpdate");
  66.                     return "wangsu"
  67.                 }
  68.                 // //组件将要更新
  69.                 // componentWillUpdate() {
  70.                 //     console.log("componentWillUpdate-son")
  72.                 // }
  73.                 //组件更新完毕
  74.                 componentDidUpdate(preProps,preState) {
  75.                     console.log("componentDidUpdate-son",preProps,preState)
  76.                 }
  77.                 render() {
  78.                     console.log("render-son")
  79.                     let { count } = this.state
  80.                     return (
  81.                         <div>
  82.                             <h1 >这个数字是:{count}</h1>
  83.                             <button onClick={this.force}>强制更新</button>
  84.                             <button onClick={this.add}>加一</button>
  85.                         </div>
  86.                     )
  87.                 }
  88.             }
  92.             ReactDOM.render(<Son name="王苏" />, document.getElementById("app"))
  93.         </script>
  94.     </body>
  96.     </html>
  97. </body>
  99. </html>

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <!DOCTYPE html>
  12.     <html lang="en">
  14.     <head>
  15.         <meta charset="UTF-8">
  16.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  17.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.         <title>Document</title>
  19.     </head>
  21.     <body>
  22.         <!DOCTYPE html>
  23.         <html lang="en">
  25.         <head>
  26.             <meta charset="UTF-8">
  27.             <meta http-equiv="X-UA-Compatible" content="IE=edge">
  28.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  29.             <title>Document</title>
  30.         </head>
  31.         <style>
  32.             .box {
  33.                 height: 150px;
  34.                 width: 200px;
  35.                 background-color: gold;
  36.                 overflow: auto;
  37.             }
  39.             .box div {
  40.                 height: 30px;
  41.             }
  42.         </style>
  44.         <body>
  45.             <div id="app">
  46.             </div>
  47.             <script src="../js/react.development.js"></script>
  48.             <script src="../js/react-dom.development.js"></script>
  49.             <script src="../js/babel.min.js"></script>
  50.             <script src="../js/prop-types.js"></script>
  51.             <script type="text/babel">
  52.                 class News extends React.Component {
  53.                     state = {
  54.                         newsArr: []
  55.                     }
  56.                     componentDidMount() {
  57.                         setInterval(() => {
  58.                             const { newsArr } = this.state
  59.                             const news = `新闻${newsArr.length + 1}`
  60.                             this.setState({
  61.                                 //将新增新闻传递到新数组中去
  62.                                 newsArr: [news, ...newsArr]
  63.                             })
  64.                         }, 1000)
  65.                     }
  66.                     //这里可以得到上一次滚动的高度
  67.                     getSnapshotBeforeUpdate() {
  68.                         return this.box.scrollHeight
  69.                     }
  70.                     //现在的高度等于上一次的高度加上滚动高度的差值
  71.                     componentDidUpdate(prevProps, prevState, height) {
  72.                         //此时的this.box.scrollHeight是这一次滚动的高度
  73.                         this.box.scrollTop+=this.box.scrollHeight-height
  74.                     }
  75.                     render() {
  76.                         let { newsArr } = this.state
  77.                         return (
  78.                             <div className="box" ref={c => this.box = c}>
  79.                                 {
  80.                                     newsArr.map((n, index) =>
  81.                                         <div key={index}>{n}</div>
  82.                                     )
  83.                                 }
  84.                             </div>
  85.                         )
  86.                     }
  87.                 }
  88.                 ReactDOM.render(<News />, document.getElementById("app"))
  89.             </script>
  90.         </body>
  92.         </html>
  93.     </body>
  95.     </html>
  96. </body>
  98. </html>