React Hook Api

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;
}