使用 render 方法更新 React 中的 UI

Question

当我阅读 react 文档时，他们说“the only way to update the UI is to create a new element, and pass it to ReactDOM.render()”。由于我在下面创建了这样的代码。

function Clock() {
 // console.log('clock called'); 

  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
                  )

  return (
    element
  );
}


ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
  );

//every second call Clock
setInterval(Clock, 1000);

时钟组件每秒都会被调用一次，因此它每秒都会创建一个新元素。当 Clock 组件传递给 render 方法时。但用户界面没有更新。为什么？我没有每秒调用一次渲染方法。因为文档没有说：“每秒调用一次渲染方法”。我以为在创建新元素时，会自动调用 render 方法。我的想法好不好？

在文档中如下代码

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

在这里他们也每秒调用一次渲染方法。但在文档中，他们并没有指定每次更新都调用 render 方法。

Answer 1

要实现组件的动态更新，您需要使用状态挂钩，例如 useEffect() 和 useState。

//import { useState } from 'react';
const { useState, useEffect } = React;

function Clock() {

const time = new Date();
// a hook to maintain the state
 const [ state, setState] = useState();
// a listener to handle changes in the parameters of the array, in our case time
  useEffect(() => {
    setState(time.toLocaleTimeString());
  }, [time])
  
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {state}.</h2>
    </div>
                  )

  return (
    element
  );
}


ReactDOM.render(
    <Clock/>,
    document.getElementById('root')
  );

在发布的代码中，我们使用useEffect() 挂钩来响应Date() 对象中的任何更改。在回调函数之后传入数组中。

这个钩子有什么作用？

它调用useState()钩子来更新我们的状态变量，我称之为state，每当时间改变时都会相应地显示出来。