组件的生命周期
class Life extends React.Component {
state = {
opacity: 1
}
render() {
return (
<div>
<h1 style={{ opacity: this.state.opacity }}>React 学不会怎么办</h1>
<button onClick={this.death}>不活了</button>
</div>
)
}
componentDidMount() {
this.timer = setInterval(() => {
console.log('1');
let { opacity } = this.state
opacity -= 0.1
if (opacity <= 0) {
opacity = 1
}
this.setState({
opacity: opacity // 改了状态就会调用redder
})
}, 200);
}
componentWillUnmount() {
// 卸载组件之前清除定时器
clearInterval(this.timer)
}
death = () => {
// 卸载组件
ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
}
}
ReactDOM.render(<Life />, document.querySelector('#app'))
初始化渲染和状态更新之后
render() {
return (
<div>
<h1 style={{ opacity: this.state.opacity }}>React 学不会怎么办</h1>
<button onClick={this.death}>不活了</button>
</div>
)
}
挂载完成
componentDidMount() {
this.timer = setInterval(() => {
let { opacity } = this.state
opacity -= 0.1
if (opacity <= 0) {
opacity = 1
}
this.setState({
opacity: opacity // 改了状态就会调用redder
})
}, 200);
}
组件将要卸载之前
componentWillUnmount() {
clearInterval(this.timer)
}
卸载组件
<button onClick={this.death}>不活了</button>
death = () => {
ReactDOM.unmountComponentAtNode(document.querySelector('#app'))
}
组件的生命周期(旧)
组件的生命周期(新)
新旧生命周期的区别在哪里?
在新的生命周期中,废弃了旧版本的3个带will的钩子,新提出了2个钩子。
新版本中除了componentWillUnmount之外,其余都需要加上UNSAFE_
过时生命周期:
① componentWillMount
② componentWillReceiveProps
③ componentWillUpdate
即将过时生命周期:(在新代码中我们应该避免使用它们)
① UNSAFE_componentWillMount
② UNSAFE_componentWillReceivePorps
③ UNSAFE_componentWillUpdate
新增生命周期
① getDerivedStateFromProps
② getSnapShotBeforeUpdate
③ getDerivedStateFromError
④ componentDidCatch
新增 getDerivedStateFromProps
实际工作中基本用不到他
这个函数前面应加static,因为是静态的。
通过这个钩子修改的state,state任何时候都取决于props,其他的函数无法进行修改。
只要这个钩子拦着,所有的状态都得听props的。
新增 getSnapshotBeforeUpdate
生命周期例子
HTML
<div id="app"></div>
CSS
.list {
width: 200px;
height: 150px;
background-color: skyblue;
overflow: auto;
}
.news {
height: 30px;
}
JS
class Count extends React.Component {
state = {
newsArr: []
}
render() {
return (
<div className="list" ref={c => { this.list = c }}>
{
this.state.newsArr.map((n, value) => {
return <div className="news" key={value}>{n}</div>
})
}
</div>
)
}
componentDidMount() {
setInterval(() => {
// 获取原数据
const { newsArr } = this.state
const news = '新闻' + (newsArr.length + 1)
this.setState({
newsArr: [news, ...newsArr]
})
}, 200);
}
getSnapshotBeforeUpdate() {
const { list } = this
return list.scrollHeight
}
componentDidUpdate(props, state, xj) {
console.log(xj);
this.list.scrollTop += this.list.scrollHeight - xj
}
}
ReactDOM.render(<Count count={109} />, document.querySelector('#app'))
component.forceUpdate()
一个不常用的生命周期方法, 它的作用就是强制刷新
官网解释如下:
默认情况下,当组件的 state 或 props 发生变化时,组件将重新渲染。如果 render() 方法依赖于其他数据,则可以调用 forceUpdate() 强制让组件重新渲染。
调用 forceUpdate() 将致使组件调用 render() 方法,此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法,包括 shouldComponentUpdate() 方法。如果标记发生变化,React 仍将只更新 DOM。
通常你应该避免使用 forceUpdate(),尽量在 render() 中使用 this.props 和 this.state。
通常来说, 我们应该用 setState()
更新数据,从而驱动更新.所以用到 component.forceUpdate()
的情况并不多