安装

create-react-app myapp
cd myapp
npm syart

import { useState } from 'react';
function App() {
  // 返回一个数组，第一个值是state, 第二个值修改 state 的方法
  const [ classComName, setClassComName ] = useState(() => 'cc');
  const handleClick = (res) => {
    setClassComName(() => res)
  }
  return (
    

      classComName} onClick={handleClick} />
      
    
  );
}
export default App;

类组件 ClassCom

生命周期-初始化阶段

1、constructor 先执行

• 初始化state，拦截路由参数
• 防抖、节流

  2、getDerivedStateFromProps执行

  • 静态函数，纯函数来用
  • 传入props和state，返回值将和之间的state合并，作为新的state

    static getDerivedStateFromProps(props, state) {
    	console.log('getDerivedStateFromProps')
    	return {
    		nameList: props.name.split('')
    	}
    }
    

    3、componentWillMount

    UNSAFE_componentWillMount

    • 渲染之前执行
    • 如果有了getDerivedStateFromProps或者getSnapshotBeforeUpdate生命周期，则不执行componentWillMount

      4、render

      5、componentDidMount 执行

      ---

      生命周期-更新阶段

      1、componentWillReceiveProps

      • 如果组件已经有了getDerivedStateFormProps则不会执行componentWillReceiveProps
        • 有一些数据，props发生改变的时候，props的改变来决定state是否更新

          2、getDerivedStateFromProps

          3、shouldComponentUpdate

              shouldComponentUpdate() {
                return true;
              }
          

          • 相当于一个拦截器，返回一个 boolean，来决定组件要不要更新

            4、componentWillUpdate

            • 获取组件更新的一些状态，dom的位置

              5、render

              • createElement

                6、getSnapshotBeforeUpdate

                • 获取更新前的快照
                • commitBeforeMutationLifeCycle

                  7、componentDidUpdate

                  • 是不能调用setState ，否则会死循环

                    ---

                    生命周期-销毁阶段

                    componentWillUnmount

                    ---

                    * 改变界面，要用 state 。调用 setState 的方法去处理。
                    

                    export default class ClassCom extends Component {
                        constructor(props) {
                            super(props);
                            this.state = {
                                number: 0,
                                msg: 'hello aaa',
                                nameList: [],
                            }
                        }
                    	
                        // static getDerivedStateFromProps(props, state) {
                        //   console.log('getDerivedStateFromProps')
                        //  return {
                        //   nameList: props.name.split('')
                        //  }
                        // }
                    	
                    	handleClickFn = function(){
                    		//省略代码，此处只是为了区分和箭头函数的区别，作用域不同，传参的时候，需要改变this指向
                    	}
                        handleClick = (type) => {
                            console.log('click', type)
                            this.setState({
                                number: this.state.number + ( type === 'plus' ? 1 : -1),
                            })
                        }
                        handleChange = (event) => {
                            this.setState({
                                msg: event.target.value
                            })
                        }
                        
                      render() {
                        const { msg, number, nameList } = this.state;
                        const { name, onClick } = this.props;
                        return (
                          
                    
                          	{this.xxx}
                            
                    {name}--{number}
                            
                    
                              {nameList.map(item => 
                    item}>{item}
                    )}
                            
                            () => { this.handleClick('plus') }}>+
                            () => { this.handleClick('minus') }}>-
                            msg} onChange={this.handleChange} />
                            {/* 子组件往父组件传值 */}
                            () => { onClick('父组件res') }} >父组件响应
                          
                        )
                      }
                    }
                    

                    函数组件 FuncCom

                    useState
                    [state，dispatch] = useState(initState)
                    - state ：作为组件状态，提供ui渲染视图
                    - dispatch ：用户修改state的方法，同时触发组件更新
                    - initState ：初始值
                    

                    const [funcName , setFuncName] = useState(()=>'initName')
                    const handleClick = ()=>{
                    	//setFuncName('newName')
                    	setFuncName(()=>'newName')
                    }
                    

                    export default function FuncCom() {
                      const [ number, setNumber ] = useState(0);
                      const [ msg, setMsg ] = useState('hello luyi');
                      const [ list, setList ] = useState([]);
                      return (
                        
                    
                            
                    函数组件--{number}
                            () => { setNumber(number + 1) }}>+
                            () => { setNumber(number - 1) }}>-
                            msg} onChange={(e) => setMsg(e.target.value)} />
                        
                      )
                    }
                    

                    useEffect

                    //处理副作用
                    useEffect(()=>destory,deps)
                    - ()=>destory,即callback，第一个参数，是一个函数
                    - destory作为callback的返回值，在下一次callback执行前调用
                    - deps 第二个参数，是一个数组，数组的值发生改变，执行上一次的destory，并再次执行callback
                    

                    useEffect(()=>{
                    	console.log('callback')
                    	return ()=>{
                    		console.log('destory')
                    	}
                    },[])