React Hook Api

本是古典何须时尚 2023-07-11 08:44 28阅读 0赞

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

*  useState
 *  useEffect
 *  createContext
 *  useContext
 *  useReducer

// Hook.tsx
    import * as React from 'react';
    import './hook.css';
    import {  Button } from 'antd';
    
    // createContext - 创建传值
    // useContext - 接收传值
    const CountContext = React.createContext(0);
    
    const HookItem = () => { 
      const count = React.useContext(CountContext);
    
      return (
        <React.Fragment>
          <p>父子组件传参: {  count }</p>
        </React.Fragment>
      )
    };
    
    const initialState = {  count: 0 };
    const reducer = (state, action) => { 
      switch (action.type) { 
        case 'increment':
          return {  count: state.count + 1 };
        case 'decrement':
          return {  count: state.count - 1 };
        default:
          throw new Error();
      }
    };
    
    const Hook = (props) => { 
      // useState - 用于声明 state
      const [ count, setCount ] = React.useState(0);
    
      // useEffect - 用于替代 componentDidMount 和 componentDidUpdate
      React.useEffect(() => { 
        document.title = `You clicked ${ count } times.`;
        return () => { }
      });
    
      // useReducer
      const [ state, dispatch ] = React.useReducer(reducer, initialState);
    
      return (
        <>
          <div className="box-style">
            { /* useState */}
            <div className="">
              <p>You clicked {  count } times.</p>
              <Button type="primary" onClick={  () => setCount(count +1) }>click me</Button>
            </div>
            { /* createContext useContext */}
            <div className="m-t-14">
              <CountContext.Provider value={  count } >
                <HookItem />
              </CountContext.Provider>
            </div>
            { /* useReducer */}
            <div className="">
              <p>Count: {  state.count } </p>
              <Button type="primary" onClick={  () => dispatch({  type: 'increment' }) }>increment</Button>
              <Button type="default" onClick={  () => dispatch({  type: 'decrement' }) }>decrement</Button>
            </div>
          </div>
        </>
      )
    };
    
    export default Hook;

/* hook.css */
    .box-style { 
      margin: 20px;
    }
    .m-t-14 { 
      margin-top: 14px;
    }