相关疑难解决方法(0)

我在函数组件中使用 useState() 并且第一次渲染调用了两次。它是正确的还是错误的？如果正确，为什么要渲染两次？setCount 也渲染组件两次。

function Example() {
  const [count, setCount] = useState(0);
  console.log("render");

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<Example />, document.getElementById('uu5'));

谢谢

以下代码在 codeandbox.io 网站的控制台（该版本使用StrictMode）以及下面的代码段（未使用StrictMode）中打印出相同的时间两次：

const { useState, useEffect } = React;

function useCurrentTime() {
  const [timeString, setTimeString] = useState("");

  useEffect(() => {
    const intervalID = setInterval(() => {
      setTimeString(new Date().toLocaleTimeString());
    }, 100);
    return () => clearInterval(intervalID);
  }, []);

  return timeString;
}

function App() {
  const s = useCurrentTime();
  console.log(s);

  return <div className="App">{s}</div>;
}

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.development.js"></script>

演示：https : //codesandbox.io/s/gallant-bas-3lq5w?file=/ src/ App.js（使用StrictMode）

这是使用生产库的片段；它仍然记录两次：

const { useState, …

据我了解，useState 钩子的更新函数应该批量运行，而不是每次调用时都重新渲染组件。我创建了以下自定义钩子：

function useObservable(source) {
  const [v, setV] = useState();

  useEffect(() => {
    const subscription = source.subscribe(setV);

    return () => subscription.unsubscribe();
  }, [source]);

  return v;
}

但是当我多次使用它时，每次发射都会导致重新渲染：

const subject = new Subject();

setTimeout(() => {
  subject.next("Value");
}, 1000);

function App() {
  const value = useObservable(subject);
  const value2 = useObservable(subject);
  const value3 = useObservable(subject);

  console.log("render"); <=== called 3 times

  return (
    <div>
      <p>{value}</p>
    </div>
  );
}

有没有办法优化这个？我是不是误解了什么？

我正在处理我的项目，我注意到当打开严格模式时，它会将两个相同的元素推入我的数组中。当严格模式关闭时，它仅将一个元素推入数组。有什么解释为什么会发生这种情况吗？

import {getRandomNumber} from './utils';


export function registerTicket() {
    const newTicket = {
        number: getRandomNumber(),
        color: 'red',
    }
    this.setState((prevState) => {
        prevState.tickets.push(newTicket);
        return {
            remainingTickets: --prevState.remainingTickets,
            tickets: prevState.tickets,

        }
    })
}

这是我的状态。

    this.state = {
      winningNumber: getRandomNumber(),
      remainingTickets: 5,
      tickets: [],
      finished: false
    };