1. The old life cycle
Mainly divided into three stages
1. Initialization phase: Triggered by ReactDOM.render() --- initial rendering
(1) constructor() constructor (before the React component is mounted, its constructor will be called)
(2) componentWillMount() The hook that the component will mount
(3) render() The render() method is the only method that must be implemented in the class component.
(4) componentDidMount() The hook after the component is mounted ==> commonly used. Generally, some initialization is done in this hook, such as: start the timer, send network requests, subscribe to messages
2. Update phase: triggered by this.setSate() inside the component or the render of the parent component
(1) shouldComponentUpdate() controls the "valve" of component updates
(2) componentWillUpdate() The hook that the component will update
(3) render() =====> must use one
(4) componentDidUpdate() hook for component update
3. Unmount component: Triggered by ReactDOM.unmountComponentAtNode()
(1) componentWillUnmount() The hook that the component will be unmounted =====> Commonly used Generally, some finishing things are done in this hook, such as: closing the timer, unsubscribing from the message
Note: The render() method is the only method that must be implemented in the class component, and other methods can be implemented according to your own needs.
We use three cases to help us better understand the statement cycle (old version)
In the first case, we first set a timer through the componentDidMount method, reset the transparency of the component every 200 milliseconds, and re-render:
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
//创建组件
class Life extends React.Component{
state={opacity:1}
death=()=>{
//卸载h2组件
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
// 组件挂载完毕
componentDidMount(){
console.log('@');
this.timer = setInterval(() => {
// 获取原状态
let {opacity} = this.state
// 减小0.1
opacity -= 0.1
// 设置新的透明度
if(opacity <= 0) opacity = 1
this.setState({opacity:opacity})
}, 200);
}
// 组件将要卸载
componentWillUnmount(){
// 清除定时器
clearInterval(this.timer)
}
//调用并渲染
render(){
return(
<div>
<h2 style={
{opacity:this.state.opacity}} >王者赢不了怎么办?</h2>
<button onClick ={this.death}>卸载就好了</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Life/>,document.getElementById('test'))
</script>
</body>
The second case is the case of clicking plus 1
*/
//创建组件
class Count extends React.Component{
// 构造器
constructor(props){
console.log('num---constructor');
super(props)
// 初始化状态
this.state={num:0}
}
// 加1按钮的回调
add=()=>{
// 获取原状态
const {num} = this.state
// 更新状态
this.setState({num:num+1})
}
// 卸载组件按钮的回调
death=()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
// 强制更新的回调
force=()=>{
this.forceUpdate()
}
// 组件将要挂载的钩子
componentWillMount(){
console.log('num---componentWillMount');
}
// 组件挂载完毕的钩子
componentDidMount(){
console.log('num---componentDidMount');
}
// 组件将要卸载的钩子
componentWillUnmount(){
console.log('num---componentWillUnmount');
}
// 控制组件更新的"阀门"
shouldComponentUpdate(){
console.log('num---shouldComponentUpdate');
return true
}
// 组件将要更新的钩子
componentWillUpdate(){
console.log('num---componentWillUpdate');
}
// 组件更新完毕的钩子
componentDidUpdate(){
console.log('num---componentDidUpdate');
}
render() {
console.log('num---render');
const {num} = this.state
return(
<div>
<h2>当前求和为:{num}</h2>
<button onClick ={this.add}>点我加1</button>
<button onClick ={this.death}>卸载组件</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Count/>,document.getElementById('test'))
In the third case, there is a parent component A and a child component B, and the value of the child component is modified through the parent component.
// 父组件A
class A extends React.Component{
state={phoneName:'小米'}
changePhone=()=>{
this.setState({phoneName:'华为'})
}
render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changePhone}>换手机</button>
<B phoneName={this.state.phoneName}/>
</div>
)
}
}
// 子组件B
class B extends React.Component{
// 组件将要接收新的props的钩子
// 有个坑，第一次传得值不算
componentWillReceiveProps(props){
console.log('B---componentWillReceiveProps',props);
}
// 控制组件更新的"阀门"
shouldComponentUpdate(){
console.log('B---shouldComponentUpdate');
return true
}
// 组件将要更新的钩子
componentWillUpdate(){
console.log('B---componentWillUpdate');
}
// 组件更新完毕的钩子
componentDidUpdate(){
console.log('B---componentDidUpdate');
}
render(){
console.log('B---render');
return(
<div>我是B组件，手机上是:{this.props.phoneName}</div>
)
}
}
//渲染组件
ReactDOM.render(<A/>,document.getElementById('test'))