一篇看懂 React Hooks开发者社区

一篇看懂 React Hooks

function App() {
  return (
    <Toggle initial={false}>
      {({ on, toggle }) => (
        <Button type="primary" onClick={toggle}> Open Modal </Button>
        <Modal visible={on} onOk={toggle} onCancel={toggle} />
    </Toggle>
}

function App() {
  const [open, setOpen] = useState(false);
  return (
      <Button type="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        visible={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
}

import { useState, useEffect } from "react";
// 底层 Hooks, 返回布尔值：是否在线
function useFriendStatusBoolean(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
  return isOnline;
// 上层 Hooks，根据在线状态返回字符串：Loading... or Online or Offline
function useFriendStatusString(props) {
  const isOnline = useFriendStatusBoolean(props.friend.id);
  if (isOnline === null) {
    return "Loading...";
  return isOnline ? "Online" : "Offline";
// 使用了底层 Hooks 的 UI
function FriendListItem(props) {
  const isOnline = useFriendStatusBoolean(props.friend.id);
  return (
    <li style={{ color: isOnline ? "green" : "black" }}>{props.friend.name}</li>
// 使用了上层 Hooks 的 UI
function FriendListStatus(props) {
  const statu = useFriendStatusString(props.friend.id);
  return <li>{statu}</li>;
}

// 这就是 Redux
function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);
  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  return [state, dispatch];
}

// 一个 Action
function useTodos() {
  const [todos, dispatch] = useReducer(todosReducer, []);
  function handleAddClick(text) {
    dispatch({ type: "add", text });
  return [todos, { handleAddClick }];
// 绑定 Todos 的 UI
function TodosUI() {
  const [todos, actions] = useTodos();
  return (
      {todos.map((todo, index) => (
        <div>{todo.text}</div>
      <button onClick={actions.handleAddClick}>Add Todo</button>
}

function App1() {
  const [todos, actions] = useTodos();
  return <span>todo count: {todos.length}</span>;
function App2() {
  const [todos, actions] = useTodos();
  return <span>todo count: {todos.length}</span>;
function All() {
  return (
      <App1 />
      <App2 />
}

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    // Clean up the subscription
    subscription.unsubscribe();
});

class Component extends React.PureComponent<Props, State> {
  private chart: G2.Chart = null;
  private rootDomRef: React.ReactInstance = null;
  componentDidMount() {
    this.rootDom = ReactDOM.findDOMNode(this.rootDomRef) as HTMLDivElement;
    this.chart = new G2.Chart({
      container: document.getElementById("chart"),
      forceFit: true,
      height: 300
    this.freshChart(this.props);
  componentWillReceiveProps(nextProps: Props) {
    this.freshChart(nextProps);
  componentWillUnmount() {
    this.chart.destroy();
  freshChart(props: Props) {
    // do something
    this.chart.render();
  render() {
    return <div ref={ref => (this.rootDomRef = ref)} />;
}

function App() {
  const ref = React.useRef(null);
  let chart: G2.Chart = null;
  React.useEffect(() => {
    if (!chart) {
      chart = new G2.Chart({
        container: ReactDOM.findDOMNode(ref.current) as HTMLDivElement,
        width: 500,
        height: 500
    // do something
    chart.render();
    return () => chart.destroy();
  return <div ref={ref} />;
}

function App() {
  const [count, setCount] = useCount();
  return <span>{count}</span>;
}

<Count>{(count, setCount) => <App count={count} setCount={setCount} />}</Count>;
function App(props) {
  return <span>{props.count}</span>;
}

function useCount() {
  const [count, setCount] = useState(0);
  return [count, setCount];
}

<UseState>
  {(count, setCount) => (
    <UseCount>
      {" "}
      {/**虽然是透传，但给 count 做了去重，不可谓没有作用 */}
      {(count, setCount) => <App count={count} setCount={setCount} />}
    </UseCount>
</UseState>

useDocumentTitle("个人中心");

function useDocumentTitle(title) {
  useEffect(
    () => {
      document.title = title;
      return () => (document.title = "前端精读");
    [title]
}

const windowSize = useWindowSize();
return <div>页面高度：{windowSize.innerWidth}</div>;

function getSize() {
  return {
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
    outerHeight: window.outerHeight,
    outerWidth: window.outerWidth
function useWindowSize() {
  let [windowSize, setWindowSize] = useState(getSize());
  function handleResize() {
    setWindowSize(getSize());
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
  }, []);
  return windowSize;
}

const className = useCss({
  color: "red"
return <div className={className}>Text.</div>;

const ref = useRef(null);
let componentSize = useComponentSize(ref);
return (
    {componentSize.width}
    <textArea ref={ref} />
);

useLayoutEffect(() => {
  handleResize();
  let resizeObserver = new ResizeObserver(() => handleResize());
  resizeObserver.observe(ref.current);
  return () => {
    resizeObserver.disconnect(ref.current);
    resizeObserver = null;
}, []);

let name = useInputValue("Jamie");
// name = { value: 'Jamie', onChange: [Function] }
return <input {...name} />;

function useInputValue(initialValue) {
  let [value, setValue] = useState(initialValue);
  let onChange = useCallback(function(event) {
    setValue(event.currentTarget.value);
  }, []);
  return {
    value,
    onChange
}

const value = useRaf(1000);

const [target, setTarget] = useState(50);
const value = useSpring(target);
return <div onClick={() => setTarget(100)}>{value}</div>;

useEffect(
  () => {
    if (spring) {
      spring.setEndValue(targetValue);
  [targetValue]
);

const value = useTween();

const fn: Easing = easing[easingName];
const t = useRaf(ms, delay);
return fn(t);

const { loading, error, result } = useAsync(fetchUser, [id]);

export function useAsync(asyncFunction) {
  const asyncState = useAsyncState(options);
  useEffect(() => {
    const promise = asyncFunction();
    asyncState.setLoading();
    promise.then(
      result => asyncState.setResult(result);,
      error => asyncState.setError(error);
  }, params);
}

async componentDidMount() {
  // setState: 改 isLoading state
  try {
    const data = await fetchUser()
    // setState: 改 isLoading、error、data
  } catch (error) {
    // setState: 改 isLoading、error
}

@Connect(...)
class App extends React.PureComponent {
  public componentDidMount() {
    this.props.fetchUser()
  public render() {
    // this.props.userData.isLoading | error | data
}

function App() {
  const { isLoading, error, data } = useFetchUser();
}

const fetchUser = id =>
  fetch(`xxx`).then(result => {
    if (result.status !== 200) {
      throw new Error("bad status = " + result.status);
    return result.json();
function useFetchUser(id) {
  const asyncFetchUser = useAsync(fetchUser, id);
  return asyncUser;
}

function App() {
  const { getFieldDecorator } = useAntdForm();
  return (
    <Form onSubmit={this.handleSubmit} className="login-form">
      <FormItem>
        {getFieldDecorator("userName", {
          rules: [{ required: true, message: "Please input your username!" }]
          <Input
            prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
            placeholder="Username"
      </FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit" className="login-form-button">
          Log in
        </Button>
        Or <a href="">register now!</a>
      </FormItem>
    </Form>
}

const [formState, { text, password }] = useFormState();
return (
    <input {...text("username")} required />
    <input {...password("password")} required minLength={8} />
  </form>
);

export function useFormState(initialState) {
  const [state, setState] = useReducer(stateReducer, initialState || {});
  const createPropsGetter = type => (name, ownValue) => {
    const hasOwnValue = !!ownValue;
    const hasValueInState = state[name] !== undefined;
    function setInitialValue() {
      let value = "";
      setState({ [name]: value });
    const inputProps = {
      name, // 给 input 添加 type: text or password
      get value() {
        if (!hasValueInState) {
          setInitialValue(); // 给初始化值
        return hasValueInState ? state[name] : ""; // 赋值
      onChange(e) {
        let { value } = e.target;
        setState({ [name]: value }); // 修改对应 Key 的值
    return inputProps;
  const inputPropsCreators = ["text", "password"].reduce(
    (methods, type) => ({ ...methods, [type]: createPropsGetter(type) }),
  return [
    { values: state }, // formState
    inputPropsCreators
}

useMount(() => {
  // quite similar to `componentDidMount`
});

useEffect(() => void fn(), []);

useUnmount(() => {
  // quite similar to `componentWillUnmount`
});

useEffect(() => fn, []);

useUpdate(() => {
  // quite similar to `componentDidUpdate`
});

const mounting = useRef(true);
useEffect(() => {
  if (mounting.current) {
    mounting.current = false;
  } else {
    fn();
});

const update = useUpdate();

const useUpdate = () => useState(0)[1];

const isMounted = useIsMounted();

const [isMount, setIsMount] = useState(false);
useEffect(() => {
  if (!isMount) {
    setIsMount(true);
  return () => setIsMount(false);
}, []);
return isMount;

const store = createStore({
  user: {
    name: "小明",
    setName: (state, payload) => {
      state.name = payload;
const App = () => (
  <StoreProvider store={store}>
    <YourApp />
  </StoreProvider>
function YourApp() {
  const userName = useStore(state => state.user.name);
  const setName = userAction(dispatch => dispatch.user.setName);
}

const StoreContext = createContext();
const StoreProvider = ({ children, store }) => (
  <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
);

const store = useContext(StoreContext);
return store;

import { Toggle } from 'react-powerplug'
function App() {
  return (
    <Toggle initial={true}>
      {({ on, toggle }) => (
        <Checkbox checked={on} onChange={toggle} />
    </Toggle>
↓ ↓ ↓ ↓ ↓ ↓
import { useToggle } from 'react-powerhooks'
function App() {
  const [on, toggle] = useToggle()
  return <Checkbox checked={on} onChange={toggle} />
}

export function Toggle() {
  // 这是 Toggle 的源码
  // balabalabala..
const App = wrap(() => {
  // 第一步：包 wrap
  const [on, toggle] = useRenderProps(Toggle); // 第二步：包 useRenderProps
});

const wrappers = []; // 全局存储 wrappers
export const useRenderProps = (WrapperComponent, wrapperProps) => {
  const [args, setArgs] = useState([]);
  const ref = useRef({});
  if (!ref.current.initialized) {
    wrappers.push({
      WrapperComponent,
      wrapperProps,
      setArgs
  useEffect(() => {
    ref.current.initialized = true;
  }, []);
  return args; // 通过下面 wrap 调用 setArgs 获取值。
};

export const wrap = FunctionComponent => props => {
  const element = FunctionComponent(props);
  const ref = useRef({ wrapper: wrappers.pop() }); // 拿到 useRenderProps 提供的 Toggle
  const { WrapperComponent, wrapperProps } = ref.current.wrapper;
  return createElement(WrapperComponent, wrapperProps, (...args) => {
    // WrapperComponent => Toggle，这一步是在构造 RenderProps 执行环境
    if (!ref.current.processed) {
      ref.current.wrapper.setArgs(args); // 拿到 on、toggle 后，通过 setArgs 传给上面的 args。
      ref.current.processed = true;
    } else {
      ref.current.processed = false;
    return element;
};

const useToggle = initialValue => {
  const [on, setOn] = useState(initialValue);
  return {
    toggle: () => setOn(!on)
};

const Toggle = ({ initialValue, children, render = children }) =>
  renderProps(render, useToggle(initialValue));

const nextState = produce(baseState, draftState => {
  draftState.push({ todo: "Tweet about it" });
  draftState[1].done = true;
});

function useImmer(initialValue) {
  const [val, updateValue] = React.useState(initialValue);
  return [
    updater => {

一篇看懂 React Hooks

一篇看懂 React Hooks

什么是 React Hooks

React Hooks 的特点

利用 useState 创建 Redux

利用 useEffect 代替一些生命周期

React Hooks 将带来什么变化

Hooks 带来的约定

状态与 UI 的界限会越来越清晰

React Hooks 实践

DOM 副作用修改 / 监听

修改页面 title

监听页面大小变化，网络是否断开

动态注入 css

组件辅助

获取组件宽高

拿到组件 onChange 抛出的值

做动画

在某个时间段内获取 0-1 之间的值

弹性动画

Tween 动画

发请求

通用 Http 封装

Request Service

填表单

Hooks 思维的表单组件

模拟生命周期

componentDidMount

componentWillUnmount

componentDidUpdate

Force Update

isMounted

存数据

全局 Store

封装原有库

RenderProps to Hooks

Hooks to RenderProps

封装原本对 setState 增强的库