React Hooks打开抽屉组件useState以及setState方法打开抽屉组件

1。在类组件中打开抽屉组件的方法：

使用state来设置显示与否。setState来改变状态

import { Drawer, Button } from 'antd';
import React from 'react'

class DrawerDemo extends React.Component {
    state = {visible:false}
    showDrawer = () => {
        this.setState({
            visible: true,
            placement: 'left'
        })
    };
    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    render() {
        return (
            

                抽屉
                
                    
Some contents...
                    
Some contents...
                    
Some contents...
                
            

        );
    }
}
export default DrawerDemo;

2。使用React Hooks来控制抽屉组件的显示与隐藏

import React, {Component,useState, useCallback} from 'react';
import {Drawer} from "antd";

function DrawHook() {
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [placement, setPlacement] = useState('left');
    const showDrawer = () => {
        setDrawerVisible(true);
        setPlacement('right');
    }
    const closeDrawer = ()=> {
        setDrawerVisible(false);
    }
    const showDrawerHook = useCallback(() => {
        setDrawerVisible(true);
        setPlacement('bottom');
    }, [drawerVisible]);
    return (
        

            抽屉组件
            抽屉组件Hook
            setDrawerVisible(true)}>打开默认的抽屉组件
            
                
抽屉
            
        
    )
}

class DrawerHookDemo extends Component{
    render() {
        return (
            
        )
    }
}

export default DrawerHookDemo;

React Hook使用：

react分为函数组件和类组件，我们先来看看这两个组件的区别

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook顾名思义就是钩子的意思。在函数组件中把React的状态和生命周期等这些特性钩入进入，这就是React的Hook

注意事项：（1）不能将 hooks 放在循环、条件语句或者嵌套方法内。react 是根据 hooks 出现顺序来记录对应状态的，执行以上操作会打乱hooks顺序

（2）只在 function 组件和自定义 hooks 中使用 hooks。

 

1. State Hooks

在类组件中，我们使用 this.state 来保存组件状态，并对其修改触发组件重新渲染。

纯函数组件没有状态，useState()用于为函数组件引入状态。

useState 有一个参数，该参数可传如任意类型的值或者返回任意类型值的函数

useState 返回值为一个数组，数组的第一个参数为我们需要使用的 state，第二个参数为一个​setter​函数，可传任意类型的变量，或者一个接收 state 旧值的函数，其返回值作为 state 新值。

上述Hooks的示例中，分别使用了3种方法显示抽屉组件。

（1）showDrawer()在函数式组件中定义一个普通函数，设置为使抽屉组件可见，并显示在右边。

    const showDrawer = () => {
        setDrawerVisible(true);
        setPlacement('right');
    }

（2）showDrawerHook() 使用Hooks的useCallback来控制组件可见，并显示在底部；

    const showDrawerHook = useCallback(() => {
        setDrawerVisible(true);
        setPlacement('bottom');
    }, [drawerVisible]);

此处代码中的[drawerVisible]可写可不写。不写的话直接放上空的中括号[]

useCallback 的用法和 useMemo 类似，是专门用来缓存函数的 hooks，也是接收两个参数；

第一个参数为一个工厂函数，返回一个缓存的值，也就是仅当重新渲染且数组中的值发生改变时，回调函数才会重新计算缓存数据，这可以使得我们避免在每次重新渲染时都进行复杂的数据计算

第二个参数为一个依赖项数组，只有依赖项中的数据发生改变时才重新计算值，用法同 useEffect 的依赖项数组。

注意：第二个参数目前只用于指定需要判断是否变化的参数，并不会作为形参传入回调函数。建议回调函数中使用到的变量都应该在数组中列出。

我们可以认为：​useCallback(fn, inputs)​ 等同于 ​useMemo(() => fn, inputs)​

useCallback一般用于在 React 中给事件绑定函数并需要传入参数的时候：

（3）直接在onClick事件中使用setDrawerVisible来打开默认的抽屉组件（即左边出现的抽屉组件）

setDrawerVisible(true)}>打开默认的抽屉组件

也可以在onClick事件中设置多个属性：

    {
                setDrawerVisible(true);
                setPlacement('top');
            }}>打开抽屉组件onClick

设置抽屉组件可见，并显示在顶部。

另外补充：

useEffect 处理副作用

函数组件能保存状态，但是却无法执行异步请求等副作用的操作，所以 React 提供了 useEffect来帮助开发者处理函数组件的副作用操作。

useEffect(effect: React.EffectCallback, deps?: ReadonlyArray | undefined)

Effect Hook作用：

处理函数组件中的副作用，如异步操作、延迟操作等，可以替代Class Component的componentDidMount、componentDidUpdate、componentWillUnmount等生命周期。

Effect Hook特性

• effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
• 副作用操作可以分两类：需要清除的和不需要清除的。
• useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行。该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容
• 与 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。大多数情况下，effect 不需要同步地执行。在个别情况下（例如测量布局），有单独的 useLayoutEffect Hook 供你使用，其 API 与 useEffect 相同
   

useContext 祖孙传值

useContext 是 React 帮你封装好的，用来处理多层级传递数据的方式，在以前组件树种，跨层级祖先组件想要给孙子组件传递数据的时候，除了一层层 props 往下透传之外，还可以使用useContext来解决爷孙组件的传值问题，新的Context API使用订阅发布者模式方式实现在爷孙组件中传值

const { Provider, Consumer } = React.createContext(null);
function Bar() {
  return {value => 
{value}
};
}
function Foo() {
  return ;
}
function App() {
  return (
    
      
    
  );
}

通过 React createContext 的语法，在 APP 组件中可以跨过 Foo 组件给 Bar 传递数据。而在 React Hooks 中，我们可以使用 useContext 进行改造。

const Context = React.createContext("hello");
function Bar() {
  const val = useContext(Context); // 使用useContext直接取值
  return 
{val}
;
}
function Foo() {
  return ;
}
function App() {
  return (
    
      
    
  );
}