其實(shí)就是 進(jìn)入當(dāng)前頁(yè)面，，然后渲染頁(yè)面，加載數(shù)據(jù)，渲染demo，數(shù)據(jù)更新，組件卸載
1.constructor
/*
* constructor 其實(shí)是Es6 里面帶的一個(gè)屬性，代表初始化，但是組件未掛載
* constructor的固定寫法如下
* 比如你react 需要定義一些
* State 的值就可以定義在 constructor里面，這個(gè)是一個(gè)很好的習(xí)慣
*/
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;
- componentWillMount
/*
* 組件初始化時(shí)只調(diào)用，
* 以后組件更新不調(diào)用，
* 整個(gè)生命周期只調(diào)用一次，此時(shí)可以修改state
*/
import React, { Component } from 'react';
class APP extends Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
}
}
/*
* 這個(gè)就是組件初始化創(chuàng)建的時(shí)候才會(huì)執(zhí)行的方法
* 并且只會(huì)執(zhí)行一次，此時(shí)可以去修改 State里面的值
* 我這里借用官網(wǎng)的定時(shí)器的例子,
* 如果看不懂es6 的代碼，很簡(jiǎn)單，把他還原成es5
* https://www.babeljs.cn/repl 把es6的代碼復(fù)制進(jìn)去就變成es5的代碼了
*/
componentWillMount(){
this.timerID = setInterval(
() => this.tick(),
1000
);
}
/*你執(zhí)行的方法函數(shù)可以寫在這里，也可以寫在底部，但是一般我都寫上面
* 美觀，并且方便人查看，我有一個(gè)習(xí)慣，寫函數(shù)方法我都會(huì)寫一個(gè)注釋，可能
* 有人說(shuō)，會(huì)增加安裝包大小，其實(shí)也不多那幾K，可以寫注釋方便別人查看，自己以后
* 也能看得懂，取名，要適合當(dāng)前場(chǎng)景，別TM去取拼音
*/
/*
* 定時(shí)器
*/
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;
3.render
/*
* react最重要的步驟，
* 創(chuàng)建虛擬dom，
* 進(jìn)行diff算法，當(dāng)你組件傳遞數(shù)據(jù)更新變化都會(huì)執(zhí)行 render
* 更新dom樹(shù)都在此進(jìn)行。此時(shí)就不能更改state了
* 你這里再去更改state 就會(huì)報(bào)錯(cuò)哦，記住了 !!!
* 一般父組件傳遞的props 都會(huì)在此獲取
* 父子之間傳遞數(shù)據(jù)，可以參考我另一篇文章
* 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的值，每次都會(huì)更新`${moneylist})
return (
<div>
Hello word
</div>
)
}
}
export default APP;
4.componentDidMount
/*
* 這個(gè)屬性就 厲害啦，這個(gè)屬性就是加載請(qǐng)求數(shù)據(jù)的最好放處，
* 此處是axios 的方式，feach 的方式其實(shí)同理
*/
import React, { Component } from 'react';
import axios from 'axios';
class APP extends Component {
constructor(props) {
super(props);
this.state = {
List: [],
}
componentDidMount（）{
/*
*先存一下this，以防使用箭頭函數(shù)this會(huì)亂指，此處可以優(yōu)化哈。
*/
const _this=this;
axios.get(`你請(qǐng)求的后端的地址`)
.then(function (response) {
_this.setState({
List:response.data,
});
})
.catch(function (error) {
console.log(error);
})
}
render() {
return (
/*
* 如果要循環(huán)數(shù)據(jù)的話就在這里寫一個(gè)map 循環(huán)就好了
*/
<div>
Hello word
</div>
)
}
}
export default APP;
5.componentWillReceiveProps(nextProps)
import React, { Component } from 'react';
class APP extends Component {
componentWillReceiveProps(nextProps){
/* 此生命周期是需要條件成立才會(huì)執(zhí)行的
* 組件初始化時(shí)不調(diào)用
* 組件接受新的props時(shí)調(diào)用。
* 常用于父子組件傳值，子組件寫這個(gè)方法函數(shù)
/
}
render() {
return (
<div>
Hello word
</div>
)
}
}
export default APP;
6.shouldComponentUpdate(nextProps, nextState)
/*
* 當(dāng)沒(méi)有導(dǎo)致state的值發(fā)生變化的setState是否會(huì)導(dǎo)致當(dāng)前頁(yè)面重渲染
* 所以，shouldComponentUpdate會(huì)阻止不必要的沒(méi)有意義的重渲染
* shouldComponentUpdate函數(shù)是重渲染時(shí)render()
* 函數(shù)調(diào)用前被調(diào)用的函數(shù)，它接受兩個(gè)參數(shù)：nextProps和nextState，
* 分別表示下一個(gè)props和下一個(gè)state的值。
* 當(dāng)函數(shù)返回false時(shí)候，阻止接下來(lái)的render()函數(shù)的調(diào)用，
* 阻止組件重渲染，而返回true時(shí)，組件照常重渲染。
*
*/
import React, { Component } from 'react';
class Son extends Component{
render(){
const {index,number,handleClick} = this.props
/*
* 在每次渲染子組件時(shí)，打印該子組件的數(shù)字內(nèi)容
*/
console.log(number);
return <h1 onClick ={() => handleClick(index)}>{number}</h1>
}
}
class Father extends Component{
constructor(props) {
super(props);
this.state = {
numberArray:[0,1,2]
}
}
/*
*點(diǎn)擊后使numberArray中數(shù)組下標(biāo)為index的數(shù)字值加一，重渲染對(duì)應(yīng)的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
/*
* 但是這樣會(huì)導(dǎo)致你的頁(yè)面性能下降，這個(gè)例子是我一開(kāi)始
* 在學(xué)的時(shí)候，看到有位大佬寫過(guò)這個(gè)我就記錄下來(lái)了，然后這樣雖然是可以實(shí)現(xiàn)效果
* 但是了，會(huì)導(dǎo)致沒(méi)有必要的渲染，如何解決了？
* 就是在子組件中渲染之前去進(jìn)行判斷，是否數(shù)據(jù)變化了，如果沒(méi)有變化，則停止，沒(méi)有
* 必要再進(jìn)行渲染
*/
解決方案如下
import React, { Component } from 'react';
class Son extends Component{
/*
* 子組件中，一開(kāi)始進(jìn)行判斷，當(dāng)前傳遞的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
7.componentWillUnmount
import React, { Component } from 'react';
class APP extends Component {
componentWillUnmount(){
/*
* 組件將要卸載時(shí)調(diào)用，
* 一些事件監(jiān)聽(tīng)和定時(shí)器需要在此時(shí)清除
*/
}
render() {
return (
<div>
Hello word
</div>
)
}
}
export default APP;
轉(zhuǎn)自鏈接：https://blog.csdn.net/chern1992/article/details/78431837
