ReactJS:动态更改html/jsx元素

import React, { useState } from 'react';

function App() {
  const [text, setText] = useState('Hello World');

  const handleClick = () => {
    setText('Hello React');
  };

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={handleClick}>Change Text</button>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

function ChildComponent(props) {
  return <h1>{props.text}</h1>;
}

function ParentComponent() {
  const [text, setText] = useState('Hello World');

  const handleClick = () => {
    setText('Hello React');
  };

  return (
    <div>
      <ChildComponent text={text} />
      <button onClick={handleClick}>Change Text</button>
    </div>
  );
}

export default ParentComponent;

// 错误示例
this.state.text = 'New Text'; // 不会触发重新渲染

// 正确示例
this.setState({ text: 'New Text' });

import React, { memo } from 'react';

const MemoizedComponent = memo(function MemoizedComponent(props) {
  /* 渲染组件 */
});