【React 基础】常用知识点【复盘】

JSX

JSX 是一个 JavaScript 语法扩展。它类似于模板语言，但它具有 JavaScript 的全部能力。JSX 最终会被编译为 React.createElement() 函数调用，返回称为 “React 元素” 的普通 JavaScript 对象。

React DOM 使用 camelCase（驼峰式命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，HTML 的 tabindex 属性变成了 JSX 的 tabIndex。而 class 属性则变为 className，这是因为 class 是 JavaScript 中的保留字：

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

详情请看下面三篇博客：

https://blog.csdn.net/weixin_43352901/article/details/107861492  // 深入JSX

https://blog.csdn.net/weixin_43352901/article/details/107779803  // jsx语法进阶使用

https://blog.csdn.net/weixin_43352901/article/details/107770932  // jsx的基础使用

---

元素

React 元素是构成 React 应用的基础砖块。元素描述了你在屏幕上想看到的内容。React 元素是不可变对象。

const element = <h1>Hello, world</h1>;

通常我们不会直接使用元素，而是从组件中返回元素。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107794490  // 元素渲染

---

组件

React 组件是可复用的小的代码片段，它们返回要在页面中渲染的 React 元素。React 组件的最简版本是，一个返回 React 元素的普通 JavaScript 函数：

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

组件也可以使用 ES6 的 class 编写：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件可被拆分为不同的功能片段，这些片段可以在其他组件中使用。组件可以返回其他组件、数组、字符串和数字。组件名称应该始终以大写字母开头（<Wrapper/> 而不是 <wrapper/>）。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107794595  // 组件 & Props

---

props

props 是 React 组件的输入。它们是从父组件向下传递给子组件的数据。

记住，props 是只读的。不应以任何方式修改它们：

// 错误做法！
props.number = 42;

如果你想要修改某些值，以响应用户输入或网络响应，请使用 state 来作为替代。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107794595  // 组件 & Props

---

props.children

每个组件都可以获取到 props.children。它包含组件的开始标签和结束标签之间的内容。例如：

<Welcome>Hello world!</Welcome>

在 Welcome 组件中获取 props.children，就可以得到字符串 Hello world!：

function Welcome(props) {
  return <p>{props.children}</p>;
}

对于 class 组件，请使用 this.props.children 来获取：

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

---

state

当组件中的一些数据在某些时刻发生变化时，这时就需要使用 state 来跟踪状态。例如，Checkbox 组件可能需要 isChecked 状态，而 NewsFeed 组件可能需要跟踪 fetchedPosts 状态。

state 和 props 之间最重要的区别是：props 由父组件传入，而 state 由组件本身管理。组件不能修改 props，但它可以修改 state。

对于所有变化数据中的每个特定部分，只应该由一个组件在其 state 中“持有”它。不要试图同步来自于两个不同组件的 state。相反，应当将其提升到最近的共同祖先组件中，并将这个 state 作为 props 传递到两个子组件。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107814311  // State & 生命周期

---

生命周期方法

生命周期方法，用于在组件不同阶段执行自定义功能。在组件被创建并插入到 DOM 时（即[挂载中阶段（mounting）），组件更新时，组件取消挂载或从 DOM 中删除时，都有可以使用的生命周期方法。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107906510

---

受控组件vs 非受控组件

React 有两种不同的方式来处理表单输入。

如果一个 input 表单元素的值是由 React 控制，就其称为受控组件。当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

一个非受控组件，就像是运行在 React 体系之外的表单元素。当用户将数据输入到表单字段（例如 input，dropdown 等）时，React 不需要做任何事情就可以映射更新后的信息。然而，这也意味着，你无法强制给这个表单字段设置一个特定值。

在大多数情况下，你应该使用受控组件。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107897072  // 非受控组件

---

key

“key” 是在创建元素数组时，需要用到的一个特殊字符串属性。key 帮助 React 识别出被修改、添加或删除的 item。应当给数组内的每个元素都设定 key，以使元素具有固定身份标识。

只需要保证，在同一个数组中的兄弟元素之间的 key 是唯一的。而不需要在整个应用程序甚至单个组件中保持唯一。

不要将 Math.random() 之类的值传递给 key。重要的是，在前后两次渲染之间的 key 要具有“固定身份标识”的特点，以便 React 可以在添加、删除或重新排序 item 时，前后对应起来。理想情况下，key 应该从数据中获取，对应着唯一且固定的标识符，例如 post.id。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107819386  // Key的作用

---

Ref

React 支持一个特殊的、可以附加到任何组件上的 ref 属性。此属性可以是一个由 React.createRef() 函数创建的对象、或者一个回调函数、或者一个字符串（遗留 API）。当 ref 属性是一个回调函数时，此函数会（根据元素的类型）接收底层 DOM 元素或 class 实例作为其参数。这能够让你直接访问 DOM 元素或组件实例。

谨慎使用 ref。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107893390  // Refs and the DOM

---

事件

使用 React 元素处理事件时，有一些语法上差异：

• React 事件处理器使用 camelCase（驼峰式命名）而不使用小写命名。
• 通过 JSX，你可以直接传入一个函数，而不是传入一个字符串，来作为事件处理器。

详情请看下面博客：

https://blog.csdn.net/weixin_43352901/article/details/107819264  // 事件处理

---

协调

当组件的 props 或 state 发生变化时，React 通过将最新返回的元素与原先渲染的元素进行比较，来决定是否有必要进行一次实际的 DOM 更新。当它们不相等时，React 才会更新 DOM。这个过程被称为“协调”。