深入浅出搞定React
2021-01-18 12:34:21 84 举报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 的
意义
- 确保生命周期函数的行为更加可控可预测，
- 从根源上帮开发者避免不合理的编程方式，
- 避免生命周期的滥用；
为 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
设计动机
类组件的问题
函数组件的优点
0 条评论
下一页
