React 社区文档

React 是一个用于构建用户界面的 JavaScript 库，它可以帮助开发者创建高性能的、响应式的 UI。

快速入门

1. 安装 React 使用 npm 或 yarn 安装 React：

   npm install react
   

   或

   yarn add react
   

2. 创建组件 React 中的组件是构成 UI 的最小单位。以下是一个简单的组件示例：

   function Welcome(props) {
     return <h1>Hello, {props.name}</h1>;
   }
   

3. 渲染组件 使用 React 的 ReactDOM 库将组件渲染到 DOM 中：

   ReactDOM.render(
     <Welcome name="Alice" />,
     document.getElementById('root')
   );
   

高级功能

1. 状态（State） 状态是组件内部数据的一个属性，可以随时间变化。以下是如何在组件中使用状态的示例：

   class Clock extends React.Component {
     constructor(props) {
       super(props);
       this.state = { date: new Date() };
     }
   
     render() {
       return (
         <div>
           <h1>Hello, world!</h1>
           <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
         </div>
       );
     }
   }
   
   ReactDOM.render(<Clock />, document.getElementById('root'));
   

2. 生命周期方法 React 组件在其生命周期中提供了多个方法，可以让我们在组件的不同阶段执行代码。以下是一些常见的生命周期方法：

   • componentDidMount(): 组件挂载后调用
   • componentDidUpdate(): 组件更新后调用
   • componentWillUnmount(): 组件卸载前调用

3. 列表和键（Keys） 当渲染一个包含多个元素的列表时，为了优化性能和正确地重新排序元素，我们需要为每个元素提供一个唯一的键（key）。

图片示例

更多关于 React 的信息，请访问我们的 React 官方文档.