什么是 react？

• react 是一个 javascript 库，用于构建用户界面，特别是单页应用程序 (spa)。它允许开发人员创建可重用的组件来管理其本地状态并处理用户交互。 react 遵循单向数据流，这意味着数据从父组件流向子组件，从而促进更好地管理数据和 ui 状态。

关键 react 术语和概念

react 中的组件

• 组件是 react 应用程序的构建块。它们代表可以多次重用的独立 ui 部分。

function mycomponent() {
  return 
hello, world!
;
}

jsx：在 react 中编写动态 javascript

• jsx(javascript xml) 是 javascript 的语法扩展，允许在 javascript 中编写类似 html 的代码。它不是实际的 html，而是使用 react.createelement() 调用转换为 javascript 代码的语法。 jsx 通过组合标记和逻辑使 react 更易于使用。

const element = 
hello, world!
;

react 中的 props（属性）：在组件之间传递数据

• props 用于将数据从一个组件传递到另一个组件，通常是从父组件传递到子组件。 props 是只读的，不应由子组件修改。

function childcomponent(props) {
  return 
{props.message}
;
}

function parentcomponent() {
  return ;
}

在 react 中使用 key 来优化渲染

• key 是在 react 中渲染元素列表时使用的特殊属性。它帮助 react 识别哪些元素已更改、添加或删除，从而优化重新渲染。

const items = ['apple', 'banana', 'cherry'];

const list = items.map((item, index) => 
{item}
);

react 中的渲染解释

• react中的渲染是指将jsx代码转换为dom元素并在浏览器中显示。 react 使用 virtual dom（更多内容见下文）来有效地管理它。

了解 react 中的虚拟 dom

• 虚拟 dom 是实际 dom 的轻量级副本。 react 使用它只更新 ui 已更改的部分而不是重新渲染整个页面来提高性能。当组件的状态发生变化时，react 会将新的虚拟 dom 与前一个虚拟 dom 进行比较（称为“比较”），并将最小数量的更改应用于真实 dom。

不可变状态

• 在 react 中，状态是不可变的（不可更改），这意味着您不能直接修改它。相反，您可以复制现有状态，应用必要的更改，然后设置新状态。

const [numbers, setnumbers] = react.usestate([1, 2, 3]);

// correct way to update state:
setnumbers([...numbers, 4]); // adds 4 to the array

指令

• “使用客户端”和“使用服务器”等指令用于扩展 react 的 next.js 等框架中。它们指示框架将特定组件视为客户端或服务器端组件。这对于确定代码执行发生的位置很有用。例如：

"use client";

export default function clientcomponent() {
  return 
this component runs on the client side.

							

								
								

									Digram
									
让Figma更好用的AI神器
								
								下载 
							
						
;
}

react 严格模式：检测潜在问题

• 严格模式是 react 中的一个工具，有助于在开发过程中检测应用程序中的潜在问题。它不会呈现任何 ui，但会为其后代激活额外的检查和警告。它不会直接影响生产代码，但有助于及早发现问题。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);