組件基本結構
構造函數constructor
- 功能：子級繼承父級的時候，通過構造函數獲取父級的屬性和方法，並通過super()傳遞的參數進行構造。
constructor(){super()}- 組件構造函數會在組件實例的時候最先調用！
constructor() {
super()
console.log('constructor 初始化數據')
}
組件
- 定義了組件繼承於React的基本組件對象，一定要有自己的組件用於實例渲染。
- 組件通過render()方法渲染，返回一個html格式的組件以供渲染。
- 組件必須要用一個容器(div)包裹，不等各個元素節點都暴露在外面。
- 組件分爲靜態組件和有狀態組件。有狀態組件通過數據或邏輯控制組件裏的內容顯示，這些內容用state和setstate控制。
- 基本格式：
render() {
console.log('渲染')
return (
<div>
<h2>{"大括號裏可以寫js代碼"}</h2>
<h2>Hello word</h2>
</div>
);
}
生命週期
- 我的實例使用腳手架創建的一個實例，腳手架使用點擊跳轉；
- 我的一個實例：
app.js
import React, {
Component
} from 'react';
class MyComponent extends Component {
constructor() {
super()
this.state = {
msg: 'Hello World'
}
console.log('constructor 初始化數據')
this.handleClick = this.handleClick.bind(this)
}
// 組件將要加載
componentWillMount() {
// 請求數據 異步操作
console.log('componentWillmount 組件將要加載')
}
// 組件加載完成
componentDidMount() {
console.log('componentDidMount 組件加載完成')
}
////////////////////////////////////////
// 運行中階段（更新階段）
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps 將要接收父組件傳來的props', nextProps)
}
// 組件是不是應該更新 默認是返回true false
shouldComponentUpdate() {
console.log('shouldComponentUpdate 組件是不是應該更新')
return true;
}
// 組件將要更新
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate 組件將要更新', nextProps, nextState)
}
// 更新完成
componentDidUpdate() {
console.log('componentDidUpdate 更新完成')
}
// 即將銷燬
componentWillUnmount() {
console.log('componentWillUnmount 即將銷燬')
}
handleClick() {
this.setState({
msg: 'new Hello World'
})
}
// 渲染
render() {
console.log('渲染')
return (
<div>
<h2>{this.state.msg}</h2>
<h2>{this.props.abc}</h2>
<input type="button" defaultValue='更新數據' onClick={this.handleClick} />
</div>
);
}
}
class App extends Component {
constructor() {
super();
this.state = {
data: 'old props',
onOff: true
}
this.changeProps = this.changeProps.bind(this)
this.toggleChild = this.toggleChild.bind(this)
}
// 要進入第二階段（更新階段） 數據在發生變化
changeProps() {
this.setState({
data: 'new props 123456',
})
}
toggleChild() {
this.setState({
onOff: !this.state.onOff
})
}
render() {
return (
<div>
{
this.state.onOff ? <MyComponent abc={this.state.data}></MyComponent> : ''
}
<input type="button" defaultValue='更新props' onClick={this.changeProps} />
<input type="button" defaultValue='銷燬組件' onClick={this.toggleChild} />
</div>
);
}
}
export default App;
運行時沒有操作過程的頁面
- 組件生命週期包含：即將加載、加載完成、更新、是否更新、即將更新、更新完成、即將銷燬。
加載
即將加載：componentWillMount
- 在組件掛載之前調用，且全局只調用一次。如果在這個鉤子裏可以setState，render後可以看到更新後的state，不會觸發重複渲染。該生命週期可以發起異步請求，並setState。
componentWillMount() {
// 請求數據 異步操作
console.log('componentWillmount 組件將要加載')
}
已經加載：componentDidMount
- 組件第一次渲染完成，此時dom節點已經生成。可以在這裏調用ajax請求，進行進一步的數據交互，返回數據setState後組件會重新渲染。
componentDidMount() {
console.log('componentDidMount 組件加載完成')
}
- 至此，聲明週期的第一個階段完成，組件的demo出現在網頁，如果有數據交互，那麼第一次的數據已經初始化完成。
更新
該不該更新：shouldComponentUpdate
- 用於控制組件該不該更新的函數，在父組件更新引起子組件重新渲染的情況下使用較多。
// 組件是不是應該更新 默認是返回true false
shouldComponentUpdate() {
console.log('shouldComponentUpdate 組件是不是應該更新')
return true;
}
即將更新：componentWillUpdate(nextProps, nextState)
- shouldComponentUpdate返回true以後，組件進入重新渲染的流程，進入componentWillUpdate,這裏同樣可以拿到nextProps和nextState，多用於數據反饋處理等。
// 組件將要更新
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate 組件將要更新', nextProps, nextState)
}
更新完成：componentDidUpdate
組件接收到數據並渲染完成時觸發。
組件更新完畢後，react只會在第一次初始化成功會進入componentDidmount,之後每次重新渲染後都會進入這個生命週期，這裏可以拿到prevProps和prevState，即更新前的props和state。
// 更新完成
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate 更新完成', prevProps, prevState)
}
- demo點擊更新數據結果:
更新階段或者說運行中階段：componentWillReceiveProps(nextProps)
- 在父組件調用子組件，給子組件更新數據的時候觸發該方法，nextProps即是傳遞進來的數據。
父組件
//父組件
class App extends Component {
constructor() {
super();
this.state = {
data: 'old props',
onOff: true
}
this.changeProps = this.changeProps.bind(this)
this.toggleChild = this.toggleChild.bind(this)
}
// 要進入第二階段（更新階段） 數據在發生變化
changeProps() {
this.setState({
data: 'new props 123456',
})
}
toggleChild() {
this.setState({
onOff: !this.state.onOff
})
}
render() {
return (
<div>
{
this.state.onOff ? <MyComponent abc={this.state.data}></MyComponent> : ''
}
<input type="button" defaultValue='更新props' onClick={this.changeProps} />
<input type="button" defaultValue='銷燬組件' onClick={this.toggleChild} />
</div>
);
}
}
點擊更新props按鈕的時候，將觸發App父組件裏的input，input點擊觸發changeState方法，state的數據被更改，由於組件基於數據驅動，那麼涉及到state的組件都會被更新，則，子組件MyComponent會被更新，MyComponent更新時收到父組件傳遞Props影響觸發運行時態聲明周期函數。
同時，傳遞過來的數據也觸發了更新狀態的生命週期函數。
即將銷燬
即將銷燬：componentWillUnmount()
- 銷燬組件後demo以及相關的事件等都會被銷燬，這就是組件的強大之處，對於web性能有很大的改善！
- clear你在組建中所有的setTimeout,setInterval
- 移除所有組建中的監聽 removeEventListener
- 也許你會經常遇到這個warning:
// 即將銷燬
componentWillUnmount() {
console.log('componentWillUnmount 即將銷燬')
}
