react生命周期第二阶段更新阶段
2019-03-15 本文已影响0人
少__年
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lifeCycle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="app"></div>
<script src="../node_modules/babel-standalone/babel.js"></script>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
class List extends React.Component {
constructor() {
super(...arguments);
// 构造只执行一次
this.state = {
list: '这是list数据',
adasdafd: this.props.title
}
// console.log( this.props )
console.log( '02-构造函数01' )
}
componentWillReceiveProps(nextProps) {
console.log('02-获取父组件更新的时候带来的数据02 ',nextProps)
/*this.setState({
adasdafd: nextProps.title
})*/
}
shouldComponentUpdate(nextProps, nextState) { // 是否更新组件
console.log('02-是否将来更新组件03')
//console.log( nextProps,nextState )
if( this.state.adasdafd !== nextProps.title ){
this.setState({
adasdafd: nextProps.title
})
}
setTimeout(()=>{
// console.log(this.state.adasdafd) // 当前组件的数据是 更新了 但是false是不渲染
},2000)
return true
// true 是 更新 执行render函数 重新渲染
// false 否 不更新 不执行render函数 不重新渲染
}
componentWillUpdate(nextProps, nextState) {
console.log('02-组件即将被更新04', nextProps, nextState )
// 更新的问题 执行render函数 才能更新
// 看自己的需求
}
render() {
console.log('02-渲染组件05')
return (
<div>
<h2> 这是List组件 </h2>
{
// 当前组件 维护当前组件的 数据（状态）
// this.props.title
this.state.adasdafd
}
</div>
);
}
componentDidUpdate(prevProps, prevState) {
console.log( '02-组件更新完成啦06', prevProps,prevState )
}
componentWillUnmount() {
// 相当于 当关闭网页的时候 要执行什么处理的原理
console.log('03-List组件即将被销毁07')
window.localStorage.setItem('componentWillUnmount','List组件销毁啦！！！！')
}
}
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
p: 'App',
onOff: true
}
console.log( '01-构造函数1 ' )
}
componentWillMount() {
console.log('01-组件即将被挂载2')
}
componentDidMount() {
console.log('01-组件挂载完成啦4')
}
handleClick = ()=>{
this.setState({
p: '点击事件改变了App的数据'
})
}
destory = ()=>{
let onOff = !this.state.onOff
this.setState({
onOff
})
}
render() {
console.log( '01-开始渲染组件3' )
return (
<div>
<h1>App</h1>
{
this.state.onOff?<List title={this.state.p}></List>:''
}
{
this.state.onOff && <List title={this.state.p}></List>
}
<br />
<button onClick={this.handleClick}>点击事件</button>
<br/>
<br/>
<br/>
<input type="button" defaultValue="销毁List组件" onClick={this.destory} />
</div>
);
}
}
ReactDOM.render(
<App></App>,
document.querySelector('#app')
)
</script>
</body>
</html>
以上内容仅供本人做笔记使用
