Props 外部数据
Props的作用
- 1.接受外部数据（只能读不能写，外部数据由父组件传递
- 2.接受外部函数（在恰当时机调用该函数 该函数一般是父组件的函数
如何读取Props外部数据
this.props是外部数据对象的地址
super的作用就是把props放进this里面
state 和 setState
this.setState({newState:fn})
//注意setstate不会立刻改变this.state 会在当前代码运行完之后再去更新this.state从而触发UI更新
this.setState((state,props)=>({fn}))
//这种方式会立刻执行fn操作然后再更新UI
生命周期
函数列表
constructor() 在这里作用是初始化state
shouldComponentUpdate() 如果return false则会阻止更新
componentDidMount() 组件挂载后执行的函数
conmponentDidUpdate() 组件更新后执行的函数
componentWillUnmount() 组件将死
constructor
shouldComponentUpadate
example（实现onclick后对比前后两次的n是否变化 如没有变化就不要render）（但好像直接用PureComponent就可以自动对比）
import React from 'react';
class App extends React.Component{
constructor(props){
super(props)
this.state = {
n: 1
}
}
onClick = ()=>{
this.setState(state =>({n: state.n +1}))//是setState接收一个回调，这个回调可以通过参数获取到state
this.setState(state =>({n: state.n -1}))
};
shouldComponentUpdate(newProps, newState){//这里的声明必须要写全 意思是如果onclick后前后两次的n值不变 就不用render了
if(newState.n === this.state.n){
return false
}else{
return true
}
}
render(){
console.log('render过了一次')
return(
<div>App
<div>{this.state.n} <button onClick = {this.onClick}>+1</button>
</div>
</div>
)
}
}
export default App
面试题：shouldComponentUpdate有什么用
它允许我们手段判断是否需要进行组件更新，我们可以根据应用场景灵活的设置返回值 以避免不必要的更新
render（展示视图 创建虚拟DO M）
componentDidMount(挂载后执行的函数）
componentDidUpdate(prevProps, prevState, snapshot?)(更新数据后执行的代码）
componentWillUnmount(谁污染谁治理）
summary
构造=>渲染=>挂载
