<!DOCTYPE html>
<html>
<head>
? ? <meat charset="UTF-8">
? ? ? ? <title>新react生命周期</title>
</head>
<body>
? ? <!-- 准备好一个容器 -->
? ? <div id="test"></div>
? ? <!-- 核心库 -->
? ? <script type="text/javascript" src="../js/react.development.js"></script>
? ? <!-- react-dom,操作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>
? ? <!-- 此处一定要写babel -->
? ? <script type="text/babel">
? ? ? ? //1.创建组件
? ? ? ? class Count extends React.Component{
? ? ? ? ? //构造器
? ? ? ? ? constructor(props){
? ? ? ? ? ? ? console.log('Count---constructor');
? ? ? ? ? ? ? super(props)
? ? ? ? ? ? ? ?//初始化状态
? ? ? ? ? ? ? this.state = { count: 0 }
? ? ? ? ? }
? ? ? ? ? //加1按钮的回调
? ? ? ? ? add = ()=>{
? ? ? ? ? ? //获取原状态
? ? ? ? ? ? const {count} =this.state
? ? ? ? ? ? //更新状态
? ? ? ? ? ? this.setState({count: count+1})
? ? ? ? ? }
? ? ? ? ? death = ()=>{
? ? ? ? ? ? ? ReactDOM.unmountComponentAtNode(document.getElementById('test'))
? ? ? ? ? }
? ? ? ? ? //强制更新按钮的问题
? ? ? ? ? force =()=>{
? ? ? ? ? ? ? this.forceUpdate()
? ? ? ? ? }
? ? ? ? ? //若state的值在任何时候取决于props，那么可以使用getDerivedStateFromProps
? ? ? ? ? static getDerivedStateFromProps(props,state){
? ? ? ? ? ? ? console.log('getDerivedStateFromProps',props,state)
? ? ? ? ? ? ? return null
? ? ? ? ? } ?
? ? ? ? ? //在更新之前获取快照
? ? ? ? ? getSnapshotBeforeUpdate(){
? ? ? ? ? ? ? console.log('getSnapshotBeforeUpdate')
? ? ? ? ? ? ? return 'atguigu'
? ? ? ? ? } ? ?
? ? ? ? ? //组件挂载完毕的钩子
? ? ? ? ? componentDidMount(){
? ? ? ? ? ? ? console.log('Count---componentDidMount')
? ? ? ? ? }
? ? ? ? ? //组件将要卸载的钩子
? ? ? ? ? componentWillUnmount(){
? ? ? ? ? ? ? console.log('Count---componentWillUnmount')
? ? ? ? ? }
? ? ? ? ? //控制组件更新的‘阀门’
? ? ? ? ? shouldComponentUpdate(){
? ? ? ? ? ? ? console.log('Count---shouldComponentUpdate')
? ? ? ? ? ? ? return false;
? ? ? ? ? }
? ? ? ? ? ? ? //组件更新完毕的钩子
? ? ? ? ? ? componentDidUpdate(preProps,preState,snapshotValue) {
? ? ? ? ? ? ? ? console.log('Count---componentDidUpdate',preProps,preState, snapshotValue)
? ? ? ? ? ? }
? ? ? ? ? ?render(){ ?
? ? ? ? ? ? ? ? console.log('Count---render')
? ? ? ? ? ? ? ? const {count}=this.state
? ? ? ? ? ? ? ?return(
? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <h2>当前求和为：{count}</h2>
? ? ? ? ? ? ? ? ? ? <button onClick={this.add}>点我+1</button> ?
? ? ? ? ? ? ? ? ? ? <button onClick={this.death}>卸载组件</button>
? ? ? ? ? ? ? ? ? ? ?<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
? ? ? ? ? ? ? ? ? </div> ? ? ? ?
? ? ? ? ? ? ? ?) ? ? ? ? ?
? ? ? ? ? ?}
? ? ? ? } ? ? ? ? ?
? ? ? ? //2.渲染组件到页面
? ? ? ? ReactDOM.render(<Count count={199}/>, document.getElementById("test")); ?
? ? </script>
</body>
</html>
