React 笔记--核心概念--杂

金樽月

于 2022-06-02 09:39:42 发布

阅读量176

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xiangxiang07/article/details/125086487

版权

React 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

文章目录

正确地使用 State
this 指向问题
向事件处理程序传递参数
条件渲染
受控组件
- - 受控输入空值
  - 三方库
状态提升
组合 VS 继承
React 哲学

正确地使用 State

State 不能直接修改
State 的更新是异步的
State 的更新是合并的

this 指向问题

在构造函数中绑定

// 为了在回调中使用 `this`，这个绑定是必不可少的
this.handleClick = this.handleClick.bind(this);

Public class field 语法

// 此语法确保 `handleClick` 内的 `this` 已被绑定。
// 注意: 这是 *实验性* 语法。
handleClick = () => {
  console.log('this is:', this);
}

在回调中使用箭头函数

<button onClick={() => this.handleClick()}>

这种方式，组件的每次重新渲染都会生成一个新的函数，如果改回调函数需要作为 props传入子组件，子组件可能会进行额外的重绘

向事件处理程序传递参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

条件渲染

可以通过返回 null 来阻止组件的渲染，但这并不会影响组件的生命周期。

受控组件

在 HTML 中，表单元素（如、和）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

受控输入空值

在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将 value 设置为 undefined 或 null。

下面的代码演示了这一点。（输入最初被锁定，但在短时间延迟后变为可编辑。）

ReactDOM.createRoot(mountNode).render(<input value="hi" />);

setTimeout(function() {
  ReactDOM.createRoot(mountNode).render(<input value={null} />);
}, 1000);

三方库

Formik

状态提升

组合 VS 继承

在 Facebook，我们在成百上千个组件中使用 React。我们并没有发现需要使用继承来构建组件层次的情况。
Props 和组合为你提供了清晰而安全地定制组件外观和行为的灵活方式。注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
如果你想要在组件间复用非 UI 的功能，我们建议将其提取为一个单独的 JavaScript 模块，如函数、对象或者类。组件可以直接引入（import）而无需通过 extend 继承它们。