常用生命周期
constructor()
用途： 初始化 props、state，用来写bind this
class Parent entends React.Component{
constructor(props){
super(props)
this.state = { name: 'fanison' }
this.onClick = this.onClick.bind(this)
}
// 新语法
onClick = ()=> {}
}
shouldComponentUpdate()
用途：
- 返回 true 表示不阻止UI更新
- 返回 false 表示阻止UI更新
- 允许我们手动判断是否要进行组件更新，可以根据应用场景灵活地设置返回值，以避免不必要的更新。
onClick = () =>{
// 先加一，再减一； 新对象与旧对象地址不同，会render两次
this.setState(state => ({n: state.n +1}));
this.setState(state =>({n: state.n - 1}));
};
// 使用 shouldComponentUpdate 对比 nextState和 this.state的每个属性，如果全都相等，就不更新；如果有一个不等，就更新
shouldComponentUpdate(nextProps,nextState){
if(nextState.n === this.state.n){
return false
}else{
return true
}
}
render(){
console.log('render了一次')
return(
<div>
{this.state.n}
<button onClick={this.onClick}>+1-1</button>
</div>
)
}
补充： 大多数情况可以使用
React.PureComponent代替 shouldComponentUpdate()
PureComponent 会在 render 之前对比新 state 和旧 state 的每一个 key，以及新 props 和旧 props 的每一个 key。
如果所有 key 的值全都一样，就不会 render；如果有任何一个 key 的值不同，就会 render。
class App extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
n : 1
};
}
onClick = () =>{
this.setState(state => ({n: state.n +1}));
this.setState(state =>({n: state.n - 1}));
};
render(){
console.log('render了一次')
return(
<div>
{this.state.n}
<button onClick={this.onClick}>+1-1</button>
</div>
)
}
}
export default App;
render()
用途：
- 展示视图
return (<div>...</div>) - 只能有一个根元素
- 如果有两个根元素，要用<React.Fragment>包起来
- <React.Fragment /> 可以缩写成 <></>
//render 里面可以写 if...else
render(){
let message
if(this.state.n % 2 === 0 ){
message = <div>偶数</div>
}else{
message = <div>奇数</div>
}
return(
<div>
{message}
<button onClick={this.onClick}>+1</button>
</div>
)
}
// render 里面可以写?:表达式
render(){
return(
<div>
{this.state.n % 2 === 0 ? <div>偶数</div>:<span>奇数</span>}
{this.state.n % 2 === 0 ? <div>偶数</div>:null}
{this.state.n % 2 === 0 && <div>偶数</div>}
<button onClick={this.onClick}>+1</button>
</div>
)
}
// render里面不能直接写for循环，需要用数组
render(){
let result = []
for(let i=0;i<this.state.array.length;i++){
result.push(this.state.array[i])
}
return(
<div>
{result}
</div>
)
}
// render里面可以写 array.map(循环)
render(){
return(
<div>
{this.state.array.map(n=><span key={n}>{n}</span>)}
</div>
)
}
componentDidMount() 组件已出现在页面
用途：
- 在元素插入页面后执行代码，这些代码依赖DOM
- 可以发起加载数据的 AJAX 请求
- 首次渲染会执行此钩子
- 可在此处获取div高度
class App extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
width:undefined
};
this.divRef = React.createRef();
}
componentDidMount(): void {
const div = document.getElementById('xxx')
console.log(div)
const width = div.getBoundingClientRect().width
this.setState({width:width})
// 使用 divRef.current
const div2 = this.divRef.current
console.log(div2)
const {width} = div2.getBoundingClientRect()
this.setState({width:width})
}
render(){
return(
<>
<div id="xxx"> GetElementById: {this.state.width} px </div>
<div ref={this.divRef}>Hello,World {this.state.width} px </div>
</>
)
}
