一、旧的生命周期
主要分为三个阶段
? ? ? ? ? ? ? ? 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
? ? ? ? ? ? ? ? ? ? ?（1）? constructor()? ?构造器（在 React 组件挂载之前，会调用它的构造函数）
? ? ? ? ? ? ? ? ? ? ?（2）? componentWillMount()? ? ? ? 组件将要挂载的钩子?
? ? ? ? ? ? ? ? ? ? ? ? (3)? ? ?render()? ? ? ? ? render() 方法是 class 组件中唯一必须实现的方法。 ? ?
? ? ? ? ? ? ? ? ? ? ? ? (4)? componentDidMount()? ? ? ? ? ? ? ? ? ? ? 组件挂载完毕的钩子==>常用?一般在这个钩子中做一些初始 化的事，例如：开启定时器、发送网络请求、订阅消息
? ? ? ? ? ? ? ? 2. 更新阶段: 由组件内部this.setSate()或父组件render触发
? ? ? ? ? ? ? ? ? ? ? ?(1)shouldComponentUpdate()? ? ? ? ? ? ? ? ? ? ?控制组件更新的"阀门"
? ? ? ? ? ? ? ? ? ? ? ?(2)? componentWillUpdate()? ? ? ? ? ? ? ? ? ? ? ? ?组件将要更新的钩子
? ? ? ? ? ? ? ? ? ? ? ?(3)render() =====> 必须使用的一个? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? ? ?(4)componentDidUpdate()? ? ? ? ? ? ? ? ? ? ? ? ? ? 组件更新完毕的钩子
? ? ? ? ? ? ? ? 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
? ? ? ? ? ? ? ? ? ? ? ?(1) componentWillUnmount() ????????????????组件将要卸载的钩子?=====> 常用?一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
注意：render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。
我们通过三个案例来帮我们更好的理解声明周期（旧版）
第一个案例这里我们先通过 componentDidMount 方法设置一个定时器，每隔200毫秒重新设置组件的透明度，并重新渲染：
<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>
第二个案例是点击加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'))
?第三个案例在这里里面有个父组件A，还有一个子组件B，通过父组件去修改子组件的值。
// 父组件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'))