前端QQ群: 981668406 在此附上我的QQ: 2489757828 有问题的话可以一同探讨 我的github: 李大玄 我的私人博客: 李大玄 我的简书: 李大玄 我的: 李大玄 我的掘金: 李大玄
以一个文件为例,好比创建一个Hello组件 页面一进来会走这些函数
/* jshint esversion: 6 */ /* * @Description: * @version: * @Author: 李继玄（lijixuan@quclouds.com） * @Date: 2020-09-03 10:00:36 * @LastEditors: 李继玄（lijixuan@quclouds.com） * @LastEditTime: 2020-09-03 10:25:05 * @FilePath: /test/src/components/Hello.js */ import React from 'react'; class Hello extends React.Component { constructor(props) { console.log('初始化阶段'); super(props); /* 初始化阶段 */ this.state = { name: '李大玄', age: 18 } } /* 页面加载之前 一般进行ajax */ componentWillMount() { console.log('页面加载之前 一般进行ajax'); } /* 组件加载后 */ componentDidMount() { console.log('组件加载后'); } state= { } updateUser = () => { this.setState({ name: '李继玄', age: '19' }) } shouldComponentUpdate() { console.log('数据是否需要更新'); /** * true 更新 * false 不更新 */ return false; } render() { /* 组件加载或者数据更新 会执行 reader 方法 */ console.log('组件加载或者数据更新 会执行 reader 方法'); return <div> 我叫{this.state.name}, 今年{this.state.age}了 <button onClick={this.updateUser}>数据更新</button> <hr></hr> </div> } }; export default Hello;当我们点击按钮去触发数据更新的时候 当点击按钮更新数据的时候, 会执行 shouldComponentUpdate 然后执行 render
