[JavaScript知识库]React Hooks useState useEffect

react hooks在16.8版本中推出，自推出后备受好评，因为他解决了旧版本上组件无法复用状态逻辑的问题

const [state, setState] = useState(initialState);
const [count, setCount ] = useState(() => 0);

useState返回的是一个数组，采用es6的结构赋值，他的第一个值是state，第二个值是一个函数；命名可以随意命名，为了规范我们一般采用xx，setXx这种格式。
useState在我们调用的时候会传入一个值，这个值用来指定state的默认值，默认值可以是布尔类型、数组、字符串、数字等类型,eg:（useState(false)、useState(1)、useState([1,2,3])）等，还支持传入一个函数，通过逻辑计算出默认值。
当我们不改变useState的值时，（即：setCount（count））页面不会重新渲染

import { useState } from "react"
const  StateExample=()=>{
    const [count,setCount] =useState(0);
    console.log("点了吗 ")  // 点击时只打印一次
    const add=()=>{
        setCount(count)
    }
    return (
        <>
        val: { count } 
        <button onClick={ add}>增加</button>
        </>
    )

}
export default StateExample

当改变useState的值的时候，页面会重新渲染，但是useState 中的函数不会重复执行，他只会执行一次

const  StateExample=()=>{
    const [count,setCount] =useState(()=>{
        console.log("执行了")   //点击时只打印一次
        return 0
    });
     console.log("点了吗 ")  // add几次打印几次
    const add=()=>{
        let num=count+1
        setCount(num)
    }
    return (
        <>
        val: { count } 
        <button onClick={ add}>增加</button>
        </>
    )
}

不需要清除副作用的：在 React 更新 DOM 之后运行一些额外的代码。比如发送网络请求，手动变更 DOM，记录日志，这些都是常见的无需清除的操作。因为我们在执行完这些操作之后，就可以忽略他们了。
官网例子：

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

需要清除副作用的;例如订阅外部数据源。这种情况下，清除工作是非常重要的，可以防止引起内存泄露！这时就需要返回一个函数。
官网例子：

import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

React 何时清除 effect？ React 会在组件卸载的时候执行清除操作。正如之前学到的，effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。

useEffect(() =>{ 
	//副作?逻辑代码
	return ()=>{
	//清理副作用需要清理的内容,类似于componentWillUnmount，组件渲染和组件卸载前执?的代码
	}
 },[])

effec的条件执行

1.什么都不传，组件每次 render 之后 useEffect 都会调用，相当于 componentDidMount 和 componentDidUpdate。

 useEffect(() => {
 	let num=count+1;
 	setCount(num);
})

2.传入一个空数组 [], 只会调用一次，相当于 componentDidMount 和 componentWillUnmount。

 useEffect(() => {
 	let num=count+1;
 	setCount(num);
},[])  //只执行一次

3.传入一个数组，其中包括变量，只有这些变量变动时，useEffect 才会执行。

 useEffect(() => {
 	let num=count+1;
 	setCount(num);
},[others]) //当others变化时才执行