当子组件返回新内容时，是否会重新渲染父组件？

Question

据我所知，当父组件的state 或props 更改时，子组件正在重新渲染。

但我不知道反之亦然。

这是一个代码。

usePromise.js（定制的钩子）

import { useEffect, useReducer } from 'react';

const reducer = (state, action) => {
    switch (action.type) {
        case 'RESOLVED':
            return { ...state, resolved: action.diff };
        case 'LOADING':
            return { ...state, loading: action.diff };
        case 'ERROR':
            return { ...state, resolved: action.diff };
        default:
            return state;
    }
};

export default function usePromise(promiseCreator, deps = []) {
    const [state, dispatch] = useReducer(reducer, {
        resolved: null,
        loading: false,
        error: null
    });

    const process = async () => {
        dispatch({ type: 'LOADING', diff: true });
        try {
            const result = await promiseCreator();
            dispatch({ type: 'RESOLVED', diff: result });
        } catch (e) {
            dispatch({ type: 'ERROR', diff: e });
        }
        dispatch({ type: 'LOADING', diff: false });
    };

    useEffect(() => {
        process();
    }, deps);

    return state;
}

使用PromiseSample.js

import React from 'react';
import usePromise from './usePromise';

const wait = () => {
    return new Promise(resolve =>
        setTimeout(() => resolve('Hello hooks!'), 3000)
    );
};

const UsePromiseSample = () => {
    const { resolved, loading, error } = usePromise(wait);

    console.log('test')

    if (loading) return <div>loading...</div>;
    if (error) return <div>error happened!</div>;
    if (!resolved) return null;

    return <div>{resolved}</div>;
};

export default UsePromiseSample;

从上面的代码可以看出，child(usePromise.js) 组件的状态变化了四次。

但似乎 parent(usePromiseSample.js) 也被重新渲染了四次，因为 test 被记录了四次。

我怎样才能轻松理解这种情况？

Answer 1

usePromise 不是子组件，而是自定义钩子。当在usePromise 中调度操作时，钩子本身不会被重新渲染，但使用它的组件是。

如果你在另一个组件中渲染UsePromiseSample，你会看到当UsePromiseSample是时父级没有重新渲染。

const { useEffect, useReducer } = React;

const reducer = (state, action) => {
  switch (action.type) {
    case 'RESOLVED':
      return { ...state, resolved: action.diff, loading: false };
    case 'ERROR':
      return { ...state, resolved: action.diff, loading: false };
    default:
      return state;
  }
};

function usePromise(promiseCreator, deps = []) {
  const [state, dispatch] = useReducer(reducer, {
    resolved: null,
    loading: true,
    error: null
  });

  const process = () => {
     promiseCreator()
       .then(result => {
         dispatch({ type: 'RESOLVED', diff: result });
       })
       .catch(e => {
        dispatch({ type: 'ERROR', diff: e });
       });
  };

  useEffect(() => {
    process();
  }, deps);

  return state;
}

const wait = () => {
  return new Promise(resolve =>
    setTimeout(() => resolve('Hello hooks!'), 3000)
  );
};

const UsePromiseSample = () => {
  const { resolved, loading, error } = usePromise(wait);

  console.log('UsePromiseSample rendered')

  if (loading) return <div>loading...</div>;
  if (error) return <div>error happened!</div>;
  if (!resolved) return null;

  return <div>{resolved}</div>;
};

const App = () => {
  console.log('App rendered')

  return <UsePromiseSample />
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>