react狀態提升
//react組件也可以在組方法中使用組件模板中的原生元素或子組件對象,但是需要手動創建ref,然後在模板中使用這個ref賦值。
一個數字控制demo
父組件
import React, { Component } from 'react';
import "./Second.css";
import Stepper from "../Stepper/Stepper.js";
class Second extends Component {
constructor(props) {
super(props);
// console.log(props);
this.state = {
num:10
}
//ref創建
this.myRef = React.createRef();
}
render() {
return (
<div>
{/* 對ref進行賦值 */}
<p ref={this.myRef}>{this.state.num}</p>
<Stepper value={this.state.num} onChange={this.numChange}></Stepper>
{/* 組件標籤的內容,會被作爲children傳遞給子組件的props。類似vue的插槽 */}
<p>{this.props.children}</p>
</div>
);
}
componentDidMount(){
console.log(this.myRef.current);
}
numChange = v=>{
console.log(v);
this.setState({
num:v
});
}
}
export default Second;
子組件
import React, { Component } from 'react';
import "./Stepper.css";
class Stepper extends Component {
constructor(props) {
super(props);
// console.log(props);
this.state = {
}
}
render() {
return (
<div>
<button onClick={this.minusClick}>-</button>
<span>{this.props.value}</span>
<button onClick={this.addClick}>+</button>
</div>
);
}
// react中組件的狀態(數組)也遵循單向數據流傳輸原則,父組件可以將狀態傳遞給子組件,子組件只能使用這個狀態,不能修改。
// 如果子組件中需要修改父組件中的某個數據,那麼父組件需要傳遞一個方法給子組件,子組件中通過調用這個方法來實現修改父組件中的數據。
minusClick = ()=>{
this.props.onChange(this.props.value-1);
}
addClick = ()=>{
this.props.onChange(this.props.value+1);
}
}
export default Stepper;
幫助理解
手動創建ref並賦值,子組件會顯示在children的位置,類似vue的插槽
{this.props.children}
一個雙向的數據綁定控制num
react的數據也遵循單向數據流傳輸原則,父傳子,子使用而不能修改,子調用方法 來修改父組件中的數據
minusClick = ()=>{
this.props.onChange(this.props.value-1);
}
子調用傳遞的方法修改傳遞的值
react生命週期
組件的生命週期可分成三個狀態:
Mounting:已插入真實 DOM
Updating:正在被重新渲染
Unmounting:已移出真實 DOM
**生命週期的方法有:from菜鳥教程
**
- componentWillMount 在渲染前調用,在客戶端也在服務端。
- componentDidMount :
在第一次渲染後調用,只在客戶端。之後組件已經生成了對應的DOM結構,可以通過this.getDOMNode()來進行訪問。
如果你想和其他JavaScript框架一起使用,可以在這個方法中調用setTimeout,
setInterval或者發送AJAX請求等操作(防止異步操作阻塞UI)。 - componentWillReceiveProps 在組件接收到一個新的 prop
(更新後)時被調用。這個方法在初始化render時不會被調用。 - shouldComponentUpdate
返回一個布爾值。在組件接收到新的props或者state時被調用。在初始化時或者使用forceUpdate時不被調用。
可以在你確認不需要更新組件時使用。 - componentWillUpdate在組件接收到新的props或者state但還沒有render時被調用。在初始化時不會被調用。
- componentDidUpdate 在組件完成更新後立即調用。在初始化時不會被調用。
- componentWillUnmount在組件從 DOM 中移除之前立刻被調用。
常用的有
// componentDidMount方法,生命週期函數,當組件渲染完畢時調用。相當於vue組件的mounted
componentDidMount(){
console.log("MyCom組件渲染完畢了");
}
// 當組件將要卸載時調用,相當於vue組件的destroied
componentWillUnmount(){
console.log("MyCom組件將要銷燬了");
}
持續更新中…