React学习笔记｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第4天。

React简介

起源

facebook在构建instagram网站时遇到两个问题：

1. 数据绑定时，大量操作真实dom，性能成本太高。
2. 网站的数据流向混乱，难以控制。

特点

• 声明式设计，可以轻松描述应用（自动dom操作）

• 高效，通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互

• 灵活，可以与已知的库或框架很好地配合

• JSX，JSX 是 JavaScript 语法的扩展

• 组件，构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中

• 实现单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单

优点

相应速度快、跨浏览器兼容、代码模块化、单项数据流等

设计思路

1. 响应式编程：状态更新、前端代码组件化、状态之间的互相依赖关系
2. 组件化：组件的组合或原子组件、组件内有状态 states、父组件可向组件内部传入状态 props
3. 状态归属：组件声明状态和UI映射、组件有 props 和 state 两种状态、组件可由其他组件构成
4. 生命周期：mount、update、unmount

hooks编程

挂载到react，可以在函数组件里"钩入" React、state 以及生命周期等特性的函数。 可以在不编写 class 的情况下使用 state 以及其他的 React 特性。

好处

1. 让函数组件内部有了维护状态的能力
2. 带来了组件的逻辑复用能力

写法

采用useState传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

采用useEffect传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。 除了计算外，还会实现比如网络请求，更新DOM，localStorage存储数据等操作

注意：Hooks()函数不能在循环或者递归里面调用。