React 知识点整理

最新推荐文章于 2024-07-24 08:58:17 发布

大前小白

最新推荐文章于 2024-07-24 08:58:17 发布

阅读量240

点赞数 1

分类专栏： React 文章标签： React

本文链接：https://blog.csdn.net/weixin_45195200/article/details/102514935

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详述React的核心概念，包括元素渲染、JSX、组件与Props、state与生命周期管理、事件处理、表单处理、CSS与SASS集成、条件渲染、列表与Keys以及React设计理念。特别强调了组件的状态不可变性，以及使用setState()更新状态的重要性。此外，还介绍了React事件处理的注意事项，如使用bind或箭头函数绑定this，以及如何在表单中实现受控组件。文章最后探讨了高阶组件的概念，它是React中实现代码复用和抽象的强大工具。

摘要由CSDN通过智能技术生成

元素的渲染

什么是 React 元素

元素是构成 React 应用的最小单位，用 ReactDOM.reader() 方法渲染。元素是普通的 js 对象，是构成组件的一个部分。

创建 React 元素

使用 JSX 语法：const element = <h1>Hello, world</h1>;，JSX 语法是用 React.createElement() 来构建 React 元素的。
React.createElement()，接受三个参数：1. 可以是一个标签名（如div、span、或 React 组件）；2. 为传入的属性；3. 组件的子组件。
React.cloneElement()，与 React.createElement() 相似，不同的是它传入的第一个参数是一个 React 元素，而不是标签名或组件；新添加的属性会并入原有属性，同属性名新的会替换旧的，传入到返回的新元素中。

渲染 React 元素到 DOM

渲染粗略过程：React元素描述的是虚拟DOM的结构，React会根据虚拟DOM渲染出页面的真实DOM。
渲染详细过程：1. 先调用 React.createElement() 编译成上面的 js 对象（也就是虚拟DOM节点）；2. 然后再调用 ReactDOMComponent( vdom).mountComponent() 将虚拟DOM变成真实的DOM；3. 最后用 appendChild( domNode ) 插入DOM树，显示出来。

更新已渲染的元素

React 元素是不可变的，我们一旦创建了一个元素，就不能再修改其子元素或任何属性，因此我们更新 UI 的唯一方法就是创建一个新的元素，并将其传入 ReactDOM.render() 方法中。

只更新必须要更新的部分

JSX 简介

JSX 是一种 JavaScript 的语法扩展，运用于 React 架构中，它是用来声明 React 当中的元素，React 使用 JSX 来描述用户界面。

JSX就是 Javascript 和 XML 结合的一种格式，React 发明了 JSX，利用HTML语法来创建虚拟DOM。当遇到 <，JSX就当HTML解析，遇到 { 就当 JavaScript 解析。

注意： 大括号里是 JavaScript，不要加引号，加引号就会被当成字符串。

组件 & Props

组件可以将UI切分成一些独立的、可复用的部件，这样就只需专注于构建每一个单独的部件了。

定义组件

函数定义组件（JavaScript函数）
ES6 class 定义组件

自定义组件（组件名称必须以大写字母开头）

组件渲染（组件名必须大写字母开头）

将组件作为React元素，标签的属性作为props键值。

组合组件（返回值只能有一个根元素）

组合组件它可以在输出中引用其他组件，在 React 应用中，按钮、表单、对话框以及整个屏幕的内容都可被表示为组件。

提取组件

可以将组件切分为更小的组件。

Props 的只读性

无论是使用函数或是类来声明一个组件，它都不能修改它自己的props值。

state & 生命周期

修改 state 时使用 setState()。

将函数转换为类

创建扩展名为 React.Component 的ES6类
创建 render() 空方法
将函数体移动到 render() 方法中
在 render() 方法中使用 this.props 替换 props

为一个类添加局部状态

在 render() 方法中使用 this.state.date 替代 this.props.date
添加一个类构造函数来初始化状态 this.state
从元素移除 date 属性

将生命周期方法添加到类中

当被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数；
React 然后调用 Clock 组件的 render() 方法；
当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子；
浏览器每秒钟调用 tick() 方法；
一旦 Clock 组件被从DOM中移除，React会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。

正确地使用状态 关于 setState() ：

不能直接更新状态，应当使用 setState()； -更新状态可能是异步的，构造函数是唯一能够初始化 this.state 的地方；
状态更新合并（浅合并），当更新一个状态时，其他的状态保持不变。

数据单向流动

从父节点传递到子节点，因为组件是简单并且易于把握的，我们只需要从父节点获取props渲染即可，如果顶层组件的某个props改变了，那么 React 会递归的向下遍历整棵组件树，重新渲染所有使用这个属性的组件。

事件处理

语法差异

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法我们需要传入一个函数作为事件处理函数，而不是一个字符串。
return false; 不会阻止组件的默认行为，需要调用 e.preventDefault();

尽量不要使用 addEventListener

绑定事件处理函数的 this

通过 bind 方法，原地绑定事件处理函数的 this 指向（特点：书写简单，但是每次渲染都会执行生成一个新函数）
通过一个箭头函数将真实的事件处理函数包装（特点：能清晰描述事件处理函数接收的参数列表）
在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定（特点：解决了前两种方法的额外开销和重新渲染的问题，但是书写有点复杂）
使用类成员字段定义语法（特点：解决了上述三种问题，唯一的就是它还没被正式纳入 ES5 规范中）

表单（Forms）

HTML 表单元素与 React 中的其他DOM元素有所不同，因为表单元素生来就保留了一些内部状态。

用value实现受控组件

< input type=”text”/>
，通过它的子节点定义了它的文本值
，创建下拉列表

file input 标签

处理多个输入元素

受控 input 组件的 null 值

在受控组件上指定值 prop 可防止用户更改输入，如果我们指定了一个 value，但是输入的值却仍然是可以编辑的，那么可能会以外的把 value 设置为 undefined 或者是 null。

CSS 和 SASS

CSS

内联样式：使用内联样式属性设置元素样式，值必须是JavaScript对象。

camelCased属性名称：由于内联CSS是用JavaScript对象background-color 编写的，因此必须使用camel case语法编写具有两个名称的属性。
JavaScript 对象：使用样式信息创建对象，并在style属性中引用它。

CSS 样式表

在单独的文件中编写CSS样式，只需使用 .css 文件扩展名保存文件，然后将其导入应用程序。

CSS 模块

向应用程序添加样式的另一种方法是使用CSS模块，它便于放置在单独文件中的组件。

Sass

Sass是一款CSS预处理器，它的文件在服务器上执行，并将 CSS 发送到浏览器。

条件渲染

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

if 语句，在React中使用if语句条件渲染是最简单的，if… else 是最基本的条件渲染方式，用 if 从渲染方法中返回null提前退出函数。
三元操作符，两种模式（edit，view），它使条件渲染更加的简洁,使得代码可以采用内联(inline)的方式表达出来。逻辑 && 操作符，不返回元素就返回null时使用。
switch… case 语句，比较冗长，可以通过立即调用函数内联使用。
枚举（enums），使用多种条件渲染最好的方式是枚举，在javascript中，对象的键值对可以用作枚举。
多层条件渲染，也被叫做嵌套条件渲染。
使用高阶组件（HOCs），使用高阶组件而屏蔽条件渲染，它的一种使用方式就是改变组件的外观，组件能关注主要的逻辑目的。