What's React Hooks?

Introducing Hooks

Hooks 是一个 React 函数组件内一类特殊的函数（通常以 "use" 开头，比如 "useState"），使开发者能够在 function component 里依旧使用 state 和 life-cycles，以及使用 custom hook 复用业务逻辑。

demo - 计数器

Basic Hooks

Additional Hooks

1.  useState

2.  useEffect

3.  useContent

1.  useReducer

2.  useCallBack

3.  useMemo

4.  useRef

5.  useImperativeMethods

6.  useLayoutEffect

Custom Hooks

.
.
.

1.  解决 function component 无法使用 state 和 生命周期方法

2.  解决组件逻辑状态(数据处理逻辑而不是数据本身)的复用

1.  解决 function component 无法使用 state 和 生命周期方法

2.  解决组件逻辑状态(数据处理逻辑而不是数据本身)的复用

function component demo

function component demo

1.  解决 function component 无法使用 state 和 生命周期方法

2.  解决组件逻辑状态(数据处理逻辑而不是数据本身)的复用

有状态的组件没有渲染，有渲染的组件没有状态

https://zhuanlan.zhihu.com/p/49408348

如何理解这句话？

Mixins 实现多组件间方法复用

HOC higher-order-components

示例： https://codesandbox.io/s/qqq8832v86

HOC = Function(component)

RenderProps

示例： https://codesandbox.io/s/qqq8832v86

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

英文：https://reactjs.org/docs/hooks-reference.html

中文：https://react.css88.com/docs/hooks-reference.html

示例：https://codesandbox.io/s/42rkk4720w

useState

useEffect

useContext

useReducer

useCallback

useMemo

useRef

useImperativeMethods

useLayoutEffect

useCustom