使用 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 组件每秒都会被调用，因此它每秒都会创建一个新元素。当 Clock 组件传递给 render 方法时。但是 UI 没有更新。为什么？我没有每秒钟调用 render 方法。因为文档没有说：“每秒调用 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，它会在时间变化时相应地显示。

使用 render 方法更新 React 中的 UI

update the UI in React using render method

user-interface

render

reactjs