react-hooks 个人笔记

useEffect 的用法

// 这个东西类似于 之前 类的那种写法中的 声明周期函数
// useEffect 是 相当于 DidMount 和 DidUpdate 两个周期函数
// 这个时候 还有解决方法 就是 我们的函数 useEffect 还有 第二个参数 我们放个空数组 他就不会 重复执行了
// 其实这个空的数组中可以 放入一个变量 该函数的执行 可以判定为 数组里面的变量是否改变 改变的情况下 才会触发本次函数

useEffect( () => {
      let _this = this;
      // console.log(NOTIFICATION_SYSTEM_STYLE)
      const getData = async ()=>{
        HttpUtils.getRequest(baseURL.cjwlUrl+'/zhuangdayun-manager/dashboard/getOrderNum',{

        })
            .then(function (responseData) {
                if(responseData.code==200){
                  
                }else{
                  message.info(responseData.message);
                }
    
            })
            .catch((error) => {
    
                // console.log(error);
            })
      }
      getData();
      // 类似于离开页面事件
      return function () {
        console.log('44444444444444');
      }
  
    },[])

注意 useEffect 的第二个参数不写，useEffect 就是 合成事件 ，（第一次进入和每次render的时候都会触发），
在里边写下边的代码，类似于离开页面的事件：componentWillUnmount；

  // 类似于离开页面事件
  return function () {
    console.log('44444444444444');
  }

useState的用法

例子：

import React, {useState} from 'react';	
function Counter() {	
  const [	
    number,	
    setNumber	
  ] = useState(0)	
  return (	
    <>	
      <p>{number}</p>	
      <button	
        onClick={	
          () => setNumber(number + 1)	
        }	
      >	
        改数字	
      </button>	
    </>	
  )	
}	
function render() {	
  ReactDOM.render(<Counter />, document.getElementById('root'));	
}	
render()

解释自己查