All posts by 龙生

React 列表 & Keys

我们可以使用 JavaScript 的 map() 方法来创建列表。
我们可以将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key。

React 条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:
React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

React Props

在 React 中，Props（属性）是用于将数据从父组件传递到子组件的机制，Props 是只读的，子组件不能直接修改它们，而是应该由父组件来管理和更新。

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

React 组件状态(State)

组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。
状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 组件

React 组件是构建 React 应用的基本单元。
组件可以分为：函数组件和类组件。

函数组件
函数组件是定义组件的一种简洁方法。
函数组件是一个接受 props 并返回 React 元素的 JavaScript 函数。

类组件
类组件使用 ES6 类语法定义，通常用于需要管理状态或使用生命周期方法的情况。

React JSX

React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。 我们不需要一定使用 JSX，但它有以下优点： JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。 它是类型安全的，在编译过程中就能发现错误。 使用 JSX 编写模板更加简单快速。

React 元素渲染

在 React 18 中，元素渲染与之前的版本有一些变化，特别是在使用 ReactDOM.createRoot 和新的并发特性方面。下面是一个详细的示例和解释，展示如何在 React 18 中渲染元素。

React 安装(CDN)

React 安装(NPM)

React 提供了一个官方工具 Create React App，用于快速搭建 React 项目。
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。