常用生命周期
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更新
- 允許我們手動判斷是否要進行組件更新，可以根據(jù)應(yīng)用場景靈活地設(shè)置返回值测柠，以避免不必要的更新。
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>
)
}
補充： 大多數(shù)情況可以使用
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>偶數(shù)</div>
}else{
message = <div>奇數(shù)</div>
}
return(
<div>
{message}
<button onClick={this.onClick}>+1</button>
</div>
)
}
// render 里面可以寫?:表達式
render(){
return(
<div>
{this.state.n % 2 === 0 ? <div>偶數(shù)</div>:<span>奇數(shù)</span>}
{this.state.n % 2 === 0 ? <div>偶數(shù)</div>:null}
{this.state.n % 2 === 0 && <div>偶數(shù)</div>}
<button onClick={this.onClick}>+1</button>
</div>
)
}
// render里面不能直接寫for循環(huán)，需要用數(shù)組
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(循環(huán))
render(){
return(
<div>
{this.state.array.map(n=><span key={n}>{n}</span>)}
</div>
)
}
componentDidMount() 組件已出現(xiàn)在頁面
用途：
- 在元素插入頁面后執(zhí)行代碼唆途，這些代碼依賴DOM
- 可以發(fā)起加載數(shù)據(jù)的 AJAX 請求
- 首次渲染會執(zhí)行此鉤子
- 可在此處獲取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>
</>
)
}
