• 在 React class 中，你通常会在 componentDidMount 中设置订阅，并在 componentWillUnmount 中清除它

• 那么在useEffect 中如何清除呢？由于添加和删除订阅的代码的紧密性，所以 useEffect 的设计是在同一个地方执行。如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它

• 实例

  componentDidMount() {
    this.refreshData();
    window.addEventListener('scroll', this.handleScroll);
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll, false);
分别相当于
 
  useEffect(()=>{
    refreshData();
    window.addEventListener('scroll', handleScroll)
  },[])
  useEffect(()=>{
    return () => {
      window.removeEventListener('scroll', handleScroll, false);
  },[])
实例2 - 定时器，离开页面后清除定时器
 
  tickFun =()=> {
    // 读取最新的 num
    console.log(this.state.num);
    this.setState({
      num:this.state.num+1
  componentDidMount() {
    this.timer = setInterval(this.tickFun,1000)
  componentWillUnmount() {
    clearInterval(this.timer)
  const [count, setCount] = useState(0);
  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1); // ✅ 在这不依赖于外部的 `count` 变量
    }, 1000);
    return () => clearInterval(id);
  }, []);
  useEffect(()=>{
    console.log(count)
  },[count])
 
参考链接-来自官微
 
其他
 useLayoutEffect
 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
 
尽可能使用标准的 useEffect 以避免阻塞视觉更新。
                    实例  componentDidMount() {    this.refreshData();    window.addEventListener('scroll', this.handleScroll);  }  componentWillUnmount() {    window.removeEventListener('scroll', this.handleScroll, false);  }分别相当于  useEffect(()=>{    refreshDa.
				
React Immer Hooks 在带有 Immer 的 React Hooks 中轻松实现不变性。
注意：React Hooks 目前是一个 RFC 提案，可能会发生变化。
您至少需要 [email protected] 才能使用此功能。
安装 yarn add react-immer-hooks 用法 useImmerState(initialState) import { useImmerState } from 'react-immer-hooks' const initialState = { clicks: 0, doubleClicks: 0 } const ClickCounters = () => { const [ state, setState ] = useImmerState(initialState) const onClick = () => setState(draft => { draft.clicks++ }) const onDoubleClick = () => setState(draft => { draft.doubleClicks++ 
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook的初衷是为了解决原本无状态组建需要使用state, 必须改造为class这个痛点.
useState
import React, { useState } from 'react';
function Example() {
  // 声明...
				
react-hooks使用
1. 什么是react-hooks?
** react-hooks是react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。笔者认为，react-hooks思想和初衷，也是把组件，颗粒化，单元化，形成独立的渲染环境，减少渲染次数，优化性能。
useCallback:white_heavy_check_mark:
useContext:white_heavy_check_mark:
useEffect:white_heavy_check_mark:
useLayoutEffect :white_heavy_check_mark:
useMemo :white_heavy_check_mark:
useReducer:white_heavy_check_mark:
useRef:white_heavy_check_mark:
useState:white_heavy_check_mark:
以上就是react-hooks主要的api,接下来
				
项目说明/项目说明
EN：使用useEffect和useState的示例（SIMPLE）应用程序
EN：使用useEffect和useState的示例（SIMPLE）应用程序
先决条件/先决条件（最好在chrome上进行测试/最好在chrome上进行测试）
 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（  ），[Node.js]（  ）。 另外，最好有一个编辑器来处理像[VSCode]（  ）这样的代码。
 ZH：开始之前，您需要在计算机上安装以下工具：[Git]（  ），[Node.js]（  ）。 另外，最好有一个编辑器来处理像[VSCode]（  ）这样的代码。
克隆此存储库/克隆此存储库
$ git clone 
在/ cmd /中访问项目文件夹/在cmd /终端中访问项目文件夹
$ cd react-hooks
安装依赖项/安装依赖项
$ npm安装
				
销毁组件：
import React, { useState,useEffect } from 'react';
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
function Index(){
    useEffect(()=>{
        console.log('Index页面的--来了...
componentDidMount() {
     this.props.dispatch({ 
         type: 'tsrouteManagement/treeNav'    /*触发接口*/
2.useEffect
import React,{useEffect} from 'react';
useEffect(()=>{
    props.dispatch({
      type: 'testModel/sele
 滚动时从特定方向淡入时出现的动画
const element = useScrollFadeIn ( [ direction ] , [ duration ] , [ delay ] ) ;
 direction（string）：元素出现的方向（上，下，左，右） default value = 'up'
 duration（number）：动画的总持续时间。 秒单位default value = 1
 delay（number）：动画延迟时间。 秒单位default value = 0
const animatedItem = useScrollFadeIn ( 'up' , 1 , 0 ) ;
				
1、hooks 是什么
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。
2、为什么要使用 hooks
难以理解的 class 、组件中必须去理解 javascript 与 this 的工作方式、需要绑定事件处理器、纯函数组件