本文共 1821 字，大约阅读时间需要 6 分钟。

React 学习总结–基础（一）

说明

• React 版本：15.4.1
• react-tap-event-plugin 版本：^2.0.1

1. React 是什么？

React 是 Facebook 内部开发的一个 JavaScript 类库，专注于构建用户与浏览器之间的交互界面。他引入了一种全新的方式来处理 DOM 的更新，即不需要专门去关注数据变化时需要重新渲染哪一部分 DOM。React 可以通过最小化的 DOM 修改实现整体应用的更新。

React 的特点

React 拥有以下独特的特点：

2. JSX（JavaScript XML）

JSX 是 React 组件内构建标签的一种 XML-style 语法，引入了 JavaScript 和 XML 的特点。虽然在不使用 JSX 的情况下 React 还能正常运行，但 JSX 可以显著提升代码的可读性和简洁性。

JSX 与 HTML 的区别

• 标签属性处理：

  JSX 向后兼容普通 HTML 标签属性，但推荐使用驼峰形式命名法（如 className 代替 class）。
  举例：<div className="container"></div> 与传统 HTML 的 <div class="container"></div> 有区别。

• 动态值双引号处理：

  JSX 允许将标签的属性值直接用 JavaScript 表达式，例如：<div id={uniqueId} className={dynamicClass}"></div>。

• 逻辑操作：

  JSX 不允许直接在标签内部使用逻辑判断（如 if 或 else），但可以通过以下方式实现动态属性值：
  • 使用三目运算符：flag ? 'true' : 'false'
  • 将逻辑判断封装到函数中调用。

• 注释方式：

  JSX支持两种注释方式：

• 单行注释：//
• 块注释：/* */ 或使用 JSX 内联的注释方式：<div> {/* 这是一个注释 */ } </div>

3. 组件的生命周期

React 组件的生命周期分为以下几个阶段：

1. 实例化阶段

组件第一次被用于创建实例时，会依次调用以下生命周期方法：

• getDefaultProps：初始化组件的默认属性。
• getInitialState：初始化状态（state）。
• componentWillMount：在组件第一次渲染之前调用，适用于一时间间隔内不允许修改状态的场景。
• render：生成虚拟 DOMSnapshot，默认返回 JSX 结构。
• componentDidMount：在组件首次渲染完成后调用，适用于访问真实 DOM 或与其它框架集成。

2. 存在期

用户开始与组件交互后，下列方法会依次被调用：

• componentWillReceiveProps：组件接收到新的 props 时调用，适用于状态更新前。
• shouldComponentUpdate：决定是否需要重新渲染，返回 true 或 false。
• componentWillUpdate：在接收到新的 props 或 state 之前调用，适用于状态更新前的事务处理。
• render：生成新的虚拟 DOMSnapshot。
• componentDidUpdate：在组件更新完成后调用，适用于触发 DOM 涉及操作或响应状态变化。

3. 销毁期

组件移除时，会调用以下方法：

• componentWillUnmount：在组件被移除前调用，适用于释放资源或清理定时任务。

下一篇内容预览

• React 数据流
• React 事件处理概述
• 复合组件（组件间通信）
• React DOM 操作（优化与限制）
• React 表单基础

转载地址：http://okvoz.baihongyu.com/