首页  思维导图  详情



 



深入浅出搞定React

2021-01-18 12:34:21   88  举报





AI智能生成

react

模板推荐

作者其他创作

大纲/内容

JSX

JSX是什么-What

JavaScript 的一种语法扩展，类似模板语言，但是它具备 JavaScript 的能力

React 为什么需要 JSX-Why

JSX 代码层次分明、嵌套关系清晰

允许开发者使用类似 HTML 标签的语法来创建虚拟 DOM

降低学习成本，提升研发效率与研发体验

How

JSX 语法是如何在 JavaScript 中生效的

Babel 将JSX 标签转化成 React.createElement()

Babel

JSX 是如何映射为 DOM 的

React.createElement(type,config,...children)

参数

type：用于标识节点的类型

config:组件所有的属性

children：所有的子节点”“子元素”

大概执行逻辑

依次对 ref、key、self 和 source 属性赋值

把 config 里面的属性都一个一个挪到 props 这个之前声明好的对象里面

把子元素放入  props.children中

处理 defaultProps

最后返回ReactElement方法，并传入刚才处理过的参数

ReactElement()

对传入的参数进行组装，最后返回一个 element(是一个JS对象，即虚拟 DOM 中的一个节点)

ReactDOM.render(element,container)

参数

element:  需要渲染的元素（ReactElement）

container:  元素挂载的目标容器（一个真实DOM）

将虚拟dm插入的真实DOM中

React16 class 组件的生命周期

挂载阶段

constructor

getDerivedStateFromProps

是干什么的-what

替换 componentWillReceiveProps

有且仅有一个核心用途：使用 props 来派生/更新 state

如何使用-how

getDerivedStateFromProps 是一个静态方法

参数

props(自父组件的 props )

state(当前组件自身的 state)

返回值必须是对象或者 null

Why

为什么是一个静态/static  方法

静态方法不依赖组件实例而存在，因此这个方法内部是访问不到 this 的

意义

<ol><li>确保生命周期函数的行为更加可控可预测，</li><li>从根源上帮开发者避免不合理的编程方式，</li><li>避免生命周期的滥用；</li></ol>

为 Fiber 架构铺路

注意事项

组件内的 render

componentDidMount

更新阶段

getDerivedStateFromProps

shouldComponentUpdate

组件内的 render

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate 与 componentDidUpdate 配合使用

componentDidUpdate

卸载阶段

componentWillUnmount

废弃的生命周期

有哪些

componentWillMount

componentWillUpdate

componentWillReceiveProps

为什么废弃

确保了 Fiber 机制下数据和视图的安全性，

确保了生命周期方法的行为更加纯粹、可控、可预测

Fiber架构

从 Fiber架构的角度理解生命周期

Render 阶段(纯净且不包含副作用。可能会被 React 暂停，中止或重新启动)

constructor

getDerivedStateFromProps

shouldComponentUpdate

组件内的 render

Pre-commit 阶段(可以读取 DOM)

getSnapshotBeforeUpdate

Commit 阶段(可以使用 DOM，运行副作用，安排更新)

componentDidMount

componentDidUpdate

componentWillUnmount

Fiber思想

Fiber 会将一个大的更新任务拆解为许多个小任务

每当执行完一个小任务时，渲染线程都会把主线程交回去，看看有没有优先级更高的工作要处理

处理完其他更高优先级任务后，再次回来处理之前的任务

React中如何传递数据

props

场景

父-子组件通信

子-父组件通信

兄弟组件通信

为什么不推荐用 props 解决其他场景的需求

如:多层组件嵌套的场景

中间组件会引入很多不属于自己的属性

增加代码量，造成代码冗余，开发与维护成本高

发布-订阅模式

生产者-消费者模式 Context API

如何使用

解决了什么问题

Redux

React-Hooks

设计动机

类组件的问题

函数组件的优点

 Collect

Get Started

深入浅出React和Redux

 Collect

Get Started

深入浅出Spring Boot 2.x

 Collect

Get Started

深入浅出数据分析

 Collect

Get Started

Java面试梳理深入浅出





0 条评论

下一页