當 state 第一次通過 DOM 上的 onClick 事件設置為相同的值時，為什么 React 會重新渲染，而不是 react-native？

Question

我有一個我認為是一個簡單的測試來證明 state 更改的測試，我有另一個測試通過計時器進行更改並且它工作正常（至少我是這樣假設的）但是這個是由click事件觸發的，它失敗了重新渲染檢查。

  it("should not rerender when setting state to the same value via click", async () => {
    const callback = jest.fn();
    function MyComponent() {
      const [foo, setFoo] = useState("bir");
      callback();
      return (<div data-testid="test" onClick={() => setFoo("bar")}>{foo}</div>);
    }

    const { getByTestId } = render(<MyComponent />)
    const testElement = getByTestId("test");
    expect(testElement.textContent).toEqual("bir");
    expect(callback).toBeCalledTimes(1);

    act(() => { fireEvent.click(testElement); });
    expect(testElement.textContent).toEqual("bar");
    expect(callback).toBeCalledTimes(2);

    act(() => { fireEvent.click(testElement); });
    expect(testElement.textContent).toEqual("bar");
    expect(callback).toBeCalledTimes(2); // gets 3 here
  })

我嘗試使用codesandbox https://codesandbox.io/s/rerender-on-first-two-clicks-700c0做同樣的事情

我在查看日志時發現它會在前兩次點擊時重新渲染，但我的期望是在第一次點擊時重新渲染，因為值是相同的。

我還通過零食在 React native 上做了類似的事情，它工作正常。 只有一個重新渲染。 所以它可能是 React-DOM 上的 onClick

Answer 1

• 實施shouldComponentUpdate以僅在 state 或屬性更改時呈現。

• 這是一個使用shouldComponentUpdate的示例，它有效
  僅用於這個簡單的用例和演示目的。 當這
  使用時，組件不再在每次單擊時重新呈現自身，而是在第一次顯示時和單擊一次后呈現。

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>