React生命周期讲解
React生命周期图解
- 先上图
-
其实总结就是 进入当前页面，，然后渲染页面，加载数据，渲染demo，数据更新，组件卸载
-
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 (
Hello word
)
}
}
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 (
Hello, world!
It is {this.state.date.toLocaleTimeString()}.
)
}
}
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 (
Hello word
)
}
}
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 循环就好了
*/
Hello word
)
}
}
export default APP;
7 componentWillReceiveProps(nextProps)
import React, { Component } from 'react';
class APP extends Component {
componentWillReceiveProps(nextProps){
/* 此生命周期是需要条件成立才会执行的
* 组件初始化时不调用
* 组件接受新的props时调用。
* 常用于父子组件传值，子组件写这个方法函数
/
}
render() {
return (
Hello word
)
}
}
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 handleClick(index)}>{number}
}
}
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(
{
this.state.numberArray.map(
(number,key) => {
return (
)
}
)
}
)
}
}
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 handleClick(index)}>{number}
}
}
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({
this.state.numberArray.map(
(number,key) => {
return
}
)
}
)
}
}
export default Father
9 .componentWillUnmount
import React, { Component } from 'react';
class APP extends Component {
componentWillUnmount(){
/*
* 组件将要卸载时调用，
* 一些事件监听和定时器需要在此时清除
*/
}
render() {
return (
Hello word
)
}
}
export default APP;
- 本人最近在学习react，特总结一份自己的理解，发表文章，
只是想能给你一点点启发 （仅适合小白观看，大佬出门右转）
也给我自己一个笔记的地方，好记性不如烂笔头说的就是这个道理吧 ！！！