小编ken*_*dek的帖子

Material-UI 网站上有一个使用 useTheme 挂钩的示例：https://material-ui.com/styles/advanced/#theming

代码在这里：

    import React from 'react';
    import { ThemeProvider, useTheme } from '@material-ui/styles';

    function DeepChild() {
      const theme = useTheme();

      return <span>{`spacing ${theme.spacing}`}</span>;
    }

    function UseTheme() {
      return (
        <ThemeProvider
          theme={{
            spacing: '8px',
          }}
        >
          <DeepChild />
        </ThemeProvider>
      );
    }

    export default UseTheme;

但它没有显示如何注入主题。当我尝试使用 className 注入一些属性时，它不会执行任何操作。代码在这里：

import React from "react";
import { ThemeProvider, useTheme } from "@material-ui/styles";

function DeepChild() {
  const theme = useTheme();

  return <div className={theme}> eldfo elo </div>;
}

function App() {
  return ( …

在函数 setBit 中，我使用数组解构并更新位并重新渲染组件

function App() {
  const [bits, setBit] = useState([0, 0, 0, 0, 0]);

  const changeBit = index => {

    setBit(prevState => {
      prevState[index] = 1;

      return ([...prevState])
    });
  };

  useEffect(() => console.log(bits));

  return (
    <div className="container">
      <div className="app">
        <ul>
          {bits.map((bit, index) => {
            return <li onClick={() => changeBit(index)}>{bit}</li>;
          })}
        </ul>
      </div>
    </div>
  );
}

但是当我返回 prevState 时没有像这样的数组解构

  const changeBit = index => {

    setBit(prevState => {
      prevState[index] = 1;

      return (prevState);
    });
  };

位已更新，但组件不会重新渲染。

prevState 和 [...prevState] 之间有什么区别？ …