<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/react/16.13.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.13.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script></head><body> <div id="app"></div>
<script type="text/babel" > console.log(React)
class Child_com extends React.Component{ constructor(props){ super(props) console.log('props : ',props) this.state = { name:'child_com description !!!', arr:[ {text:'description 001 !!!',id:10}, {text:'description 002 !!!',id:11} ] } }
// componentWillMount已被重命名 该方法在17版本中将被废除掉 componentWillMount(){ console.group('WillMount:') console.log('componentWillMount 执行了') console.groupEnd() }
componentDidMount(){ console.group('DidMount:') console.log('componentDidMount 执行了') console.groupEnd() }
// 在当前版本中会有警告 用于替换 componentWillReceiveProps , 这两份方法不能同时写，否则会报错 // 如果执行次生命周期函数 则 componentWillUpdate 不会执行了 static getDerivedStateFromProps(...rest){ console.group('DerivedStateFromProps:') console.log('rest : ',rest) console.log('getDerivedStateFromProps') console.groupEnd() }
// componentWillReceiveProps(newprops,newstate){ // console.group(' WillReceiveProps : ') // console.log('componentWillReceiveProps 执行了') // console.log('newprops : ',newprops) // console.groupEnd() // } // 用于获得dom更新后的前一个state和props的状态数据 getSnapshotBeforeUpdate(...rest){ console.group(' SnapshotBeforeUpdate : ') console.log('getSnapshotBeforeUpdate 执行了',rest) console.groupEnd() }
// componentWillUpdate(...rest){ // console.group(' WillUpdate : ') // console.log(' componentWillUpdate 执行了',rest) // console.groupEnd() // }
componentDidUpdate(){ console.group(' DidUpdate : ') console.log(' componentDidUpdate 执行了') console.groupEnd() }
// 组件即将销毁销毁 componentWillUnmount(...rest){ console.group(' WillUnmount : ') console.log(' componentWillUnmount 执行了',rest) alert('确认隐藏组件吗 ???? ') console.groupEnd() }
render(){ return ( <div className='child_com'> <p>子组件</p> <p>{this.state.name}</p> <p>接收父组件的props值：{this.props.num}</p> </div> ) } } class Main extends React.Component{ constructor(){ super() console.log('constructor 组件的状态初始化') this.state={ num : 0 , isShowchild: true } }
handleClick = ()=> { console.log('加一操作执行了') this.setState({num:this.state.num + 1},()=>{ console.log('加一操作执行完毕') }) }
handleClickShow = () => { this.setState({isShowchild: !this.state.isShowchild},()=>{ console.log('是否显示子组件 ： ',this.state.isShowchild) }) } render(){ return ( <div className='main'> <h4>MAIN 组件部分 </h4> <p>当前 num 的值 ：{this.state.num}</p> <button onClick={this.handleClick}>加一操作</button> <button onClick={this.handleClickShow}>是否显示子组件</button> <hr/> { this.state.isShowchild ? <Child_com other="其他属性之" num={this.state.num}/> : '' } </div> ) } }
// App 主组件 const App = () => { return ( <div> <h4>HELLO APP</h4> <Main /> </div> ) } ReactDOM.render( <App/>, document.getElementById('app'), ()=>{ console.log('组件挂在成功') } )
</script></body></html>
