掌握 react：关键概念综合指南
react 彻底改变了我们构建用户界面的方式。本指南将引导您了解基本的 react 概念，帮助您了解如何创建动态、高效且可维护的应用程序。
jsx 和动态值
react 的核心优势之一是 jsx，它允许您在标记中使用动态 javascript 值。您可以使用花括号 {} 直接显示数据，使属性动态化，甚至使用 javascript 对象设置元素的样式。
jsxcopyconst name = "john";
const element = <h1 style={{color: 'blue'}}>hello, {name}</h1>;
组件和片段
在 react 中，组件是 ui 的构建块。但是，组件只能返回单个父元素。为了避免添加不必要的 dom 元素，您可以使用 react fragments：
jsxcopyreturn (
<>
<childcomponent1 />
<childcomponent2 />
</>
);
道具和数据流
props 允许您在组件之间传递数据。它们就像可以添加到任何组件的自定义属性：
jsxcopyfunction greeting(props) {
return <h1>hello, {props.name}</h1>;
}
<greeting name="alice" />
children 属性很特殊，允许您将组件作为属性传递给其他组件，这对于组合和创建布局组件非常有用。
列表中的键
在 react 中渲染列表时，每个项目都应该有一个唯一的 key prop。这有助于 react 识别哪些项目已更改、添加或删除：
jsxcopyconst listitems = items.map((item) =>
<li key={item.id}>{item.name}</li>
);
渲染和虚拟 dom
react 使用 virtual dom 来高效地更新 ui。当应用程序的状态发生变化时，react 会更新虚拟 dom，将其与之前的版本进行比较（比较），然后仅在必要时更新真实 dom（协调）。
事件处理
react 提供了一种简单的方法来处理用户事件：
jsxcopyfunction handleclick() {
alert('button clicked!');
}
<button onclick={handleclick}>click me</button>
状态管理
状态表示应用程序中可能随时间变化的数据。在函数组件中，可以使用 usestate 钩子来管理状态：
jsxcopyconst [count, setcount] = usestate(0);
<button onclick={() => setcount(count + 1)}>
clicks: {count}
</button>
受控组件
在受控组件中，表单数据由 react 状态处理：
jsxcopyconst [value, setvalue] = usestate('');
<input
value={value}
onchange={(e) => setvalue(e.target.value)}
/>
react hook
hooks 允许您在函数组件中使用状态和其他 react 功能。一些重要的钩子包括：
usestate 来管理状态
useeffect 的副作用
usecontext 用于使用上下文
useref 用于引用 dom 元素
usememo 和 usecallback 用于性能优化
纯成分
react 组件应该是其 props 和 state 的纯函数。他们不应该修改渲染之前存在的外部变量或对象。
useeffect 的副作用
useeffect 钩子允许您在函数组件中执行副作用：
jsxcopyuseeffect(() => {
document.title = `you clicked ${count} times`;
}, [count]);
refs 和 dom
refs 提供了一种访问 dom 节点或 react 元素的方法：
jsxcopyconst inputref = useref(null);
<input ref={inputref} />
深度数据传递的上下文
context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递 props：
jsxCopyconst ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}
门户、悬念和错误边界
门户允许您将组件渲染到 dom 树的不同部分。
suspense 允许您在组件加载时指定后备内容。
错误边界是在其子组件树中的任何位置捕获 javascript 错误并显示后备 ui 的组件。
通过掌握这些概念，您将顺利成为一名熟练的 react 开发人员。请记住，实践是巩固您对这些原则的理解的关键。
