新手对React生命周期的理解

栏目: IOS · Android · 发布时间: 5年前

  1. 先上图(引用官网图片)
新手对React生命周期的理解
  1. 其实总结就是 进入当前页面,,然后渲染页面,加载数据,渲染demo,数据更新,组件卸载

  2. constructor

/*
* constructor 其实是Es6 里面带的一个属性,代表初始化,但是组件未挂载
* constructor的固定写法如下
* 比如你react 需要定义一些 
* State 的值就可以定义在 constructor里面,这个是一个很好的习惯
*/
import React, { Component } from 'react';
 class APP extends Component {

  constructor(props) {
    super(props);
    this.state = {
    counter: 0,
  }
  }
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}

export default APP;

复制代码

4 componentWillMount

/*
* 组件初始化时只调用,
* 以后组件更新不调用,
* 整个生命周期只调用一次,此时可以修改state
*/

import React, { Component } from 'react';

class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
    date: new Date()
    }
  }
  /*
  * 这个就是组件初始化创建的时候才会执行的方法
  * 并且只会执行一次,此时可以去修改 State里面的值
  * 我这里借用官网的定时器的例子,
  * 如果看不懂es6 的代码,很简单,把他还原成es5
  * https://www.babeljs.cn/repl  把es6的代码复制进去就变成es5的代码了
  */
  componentWillMount(){
   this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  /*你执行的方法函数可以写在这里,也可以写在底部,但是一般我都写上面
  * 美观,并且方便人查看,我有一个习惯,写函数方法我都会写一个注释,可能
  * 有人说,会增加安装包大小,其实也不多那几K,可以写注释方便别人查看,自己以后
  * 也能看得懂,取名,要适合当前场景,别TM去取拼音
  */
  /*
  * 定时器
  */
  tick() {
    this.setState({
      date: new Date()
    });
   }
  
  render() {
    return (
      <div>
         <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
    </div>
    )
  }

}
export default APP;
复制代码

5 render

/*
* react最重要的步骤,
* 创建虚拟dom,
* 进行diff算法,当你组件传递数据更新变化都会执行 render
* 更新dom树都在此进行。此时就不能更改state了
* 你这里再去更改state 就会报错哦,记住了 !!!
* 一般父组件传递的props 都会在此获取
* 父子之间传递数据,可以参考我另一篇文章
* https://blog.csdn.net/wonaixiaoshenshen/article/details/89221569
*/
import React, { Component } from 'react';
class APP extends Component {
  render() {
  const { moneylist} =this.props
  console.log(`这里可以打印一下moneylist的值,每次都会更新`${moneylist})
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

复制代码

6 componentDidMount

/*
* 这个属性就 厉害啦,这个属性就是加载请求数据的最好放处,
* 此处是axios 的方式,feach 的方式其实同理
*/
import React, { Component } from 'react';
import axios from 'axios';
class APP extends Component {
  constructor(props) {
    super(props);
    this.state = {
    List: [],
    }
componentDidMount(){
   /*
  *先存一下this,以防使用箭头函数this会乱指,此处可以优化哈。
  */
    const _this=this;  
    axios.get(`你请求的后端的地址`)
    .then(function (response) {
      _this.setState({
        List:response.data,
      });
    })
    .catch(function (error) {
      console.log(error);
    })
}
  render() {
    return (
    /*
    * 如果要循环数据的话就在这里写一个map 循环就好了
    */
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

复制代码

7 componentWillReceiveProps(nextProps)

import React, { Component } from 'react';
class APP extends Component {

componentWillReceiveProps(nextProps){
/*  此生命周期是需要条件成立才会执行的
*   组件初始化时不调用
*   组件接受新的props时调用。
*   常用于父子组件传值,子组件写这个方法函数
/
}
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;
复制代码

8 shouldComponentUpdate(nextProps, nextState)

/*
* 当没有导致state的值发生变化的setState是否会导致当前页面重渲染 
* 所以,shouldComponentUpdate会阻止不必要的没有意义的重渲染
* shouldComponentUpdate函数是重渲染时render()
* 函数调用前被调用的函数,它接受两个参数:nextProps和nextState,
* 分别表示下一个props和下一个state的值。
* 当函数返回false时候,阻止接下来的render()函数的调用,
* 阻止组件重渲染,而返回true时,组件照常重渲染。
*
*/

import React, { Component } from 'react';
class Son extends Component{
  render(){
    const {index,number,handleClick} = this.props
    /*
    * 在每次渲染子组件时,打印该子组件的数字内容
    */
    console.log(number);
    return <h1 onClick ={() => handleClick(index)}>{number}</h1>
  }
}
class Father extends Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[0,1,2]
    }
  }
  /*
  *点击后使numberArray中数组下标为index的数字值加一,重渲染对应的Son组件
  */
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     preNumberArray[index] += 1;
     this.setState({
        numberArray:preNumberArray
     })
  }
  render(){
    return(
             <div style ={{margin:30}}>{
              this.state.numberArray.map(
                (number,key) => {
                 return (
                           <Son
                           key = {key}
                           index = {key}
                           number ={number}
                           handleClick ={this.handleClick}/>
                 ) 
                }
                )
              }
           </div>)
  }
}
export default Father
/*
* 但是这样会导致你的页面性能下降,这个例子是我一开始
* 在学的时候,看到有位大佬写过这个我就记录下来了,然后这样虽然是可以实现效果
* 但是了,会导致没有必要的渲染,如何解决了?
* 就是在子组件中渲染之前去进行判断,是否数据变化了,如果没有变化,则停止,没有
* 必要再进行渲染
*/
复制代码

解决方案如下

import React, { Component } from 'react';
class Son extends Component{
/*
* 子组件中,一开始进行判断,当前传递的props 是否相同
* 如果相同,则暂停渲染(指渲染一次),否则就渲染
*/
  shouldComponentUpdate(nextProps,nextState){
      if(nextProps.number == this.props.number){
        return false
      }
      return true
  }
  render(){
    const {index,number,handleClick} = this.props
    console.log(number);
    return <h1 onClick ={() => handleClick(index)}>{number}</h1>
  }
}
class Father extends Component{
  constructor(props) {
    super(props);
    this.state = {
      numberArray:[0,1,2]
    }
  }
  handleClick = (index) => {
     let preNumberArray = this.state.numberArray
     preNumberArray[index] += 1;
     this.setState({
        numberArray:preNumberArray
     })
  }
  render(){
    return(<div style ={{margin:30}}>{
              this.state.numberArray.map(
                (number,key) => {
                 return <Son
                           key = {key}
                           index = {key}
                           number ={number}
                           handleClick ={this.handleClick}/>
                }
                )
              }
           </div>)
  }
}
export default Father
复制代码

9 .componentWillUnmount

import React, { Component } from 'react';

class APP extends Component {

componentWillUnmount(){
/*
* 组件将要卸载时调用,
* 一些事件监听和定时器需要在此时清除
*/
}
  render() {
    return (
      <div>
        Hello word
    </div>
    )
  }
}
export default APP;

复制代码
  • 本人最近在学习react,特总结一份自己的理解,发表文章, 只是想能给你一点点启发 ( 仅适合小白观看,大佬出门右转 ,开玩笑啦,我还是很希望大佬指点一下的,谢谢 ^-^ ) 也给我自己一个笔记的地方,好记性不如烂笔头说的就是这个道理吧 !!!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

P3P Web隐私

P3P Web隐私

克劳娜著、技桥译 / 克劳娜 / 清华大学出版社 / 2004-5 / 45.0

自万维网络中出现商业站点以来,基于Web的商业需求和用户的隐私权利之间就存在着不断的斗争。Web开发者们需要收集有关用户的信息,但是他们也需要表示出对用户隐私的尊重。因此隐私偏好工程平台,或者称之为P3P,就作为满足双方利益的技术应运而生了。 P3P由万维网协会研制,它为Web用户提供了对自己公开信息的更多的控制。支持P3P的Web站点可以为浏览者声明他们的隐私策略。支持P3P的浏览......一起来看看 《P3P Web隐私》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码