React篇

一、基础知识
1、函数式编程两大核心理念
1）纯函数
输出结果只受输入参数的影响，执行过程是封闭的，不会对外界造成影响。
只要入参是一样的，输出的结果必然是一致的。
2）函数柯里化（高阶函数的一种特殊用法）
函数柯里化是一种将使用多个参数的函数转换成一系列只使用1个参数的函数的技术
优点：提高参数复用率，代码拓展性强
缺点：代码逻辑不太好捋

2、react Fiber
就是指react 16.x版本，最主要、日常用的比较多更新的特点：
1】废弃一些生命周期，新增生命周期getDerivedStateFromProps
2】react hooks
3】注意：
最新的react17，几乎没有更新任何新的功能，主要是替换底层代码，向下兼容

3、react设计理念
1】单向数据流，单向绑定(单向渲染)
2】虚拟dom
3】组件化

4、创建react应用
1】创建
脚手架工具 create-react-app，template 后面加上typescript即可创建基于 ts的项目
2】tsconfig.json
noImplicitAny: false //不需要显示声明变量的类型any

5、JSX
react将html和js进行耦合，就形成了jsx，本质上是一个对象（React.createElement()对象），它是一种基于 all in JS 的思想。
1】花括号声明变量（React会自动转义，防止XSS注入攻击）
2】可嵌入表达式
3】可指定子元素
4】命名约定使用小驼峰，比如className
注意：
a、需要替换成为，不然会被认为是 JS里面的for循环
b、<></> 是 <React.Fragment/> 的语法糖
c、注释

6、CSS in JS（JSS）
以对象的方式引入CSS；避免CSS样式全局污染

7、网络API请求
可以使用自带的fetch函数

8、react组件的生命周期

1）初始化：mounting
创建虚拟dom，渲染UI
1】constructor：用于初始化state
2】componentWillMount(废弃)：初始化数据后，但是还未渲染DOM
3】render：渲染UI
4】componentDidMount：创建好dom元素，挂载进页面的时候调用，可以在此生命周期发起网络请求

2）更新：updating
更新虚拟dom，重新渲染UI
1】componentWillReceiveProps(废弃)：在接受父组件改变后的props需要重新渲染组件时，使用这个会导致组件循环render的问题，目前使用这个代替：getDerivedStateFromProps(nextProps, prevState)
2】shouldComponentUpdate
state发生变化的时候触发的生命周期，默认返回true，允许渲染；若返回false时不会重新render
一般用于父组件发生更新的时候，如果子组件不需要更新，则false。
3】render：渲染UI
4】componentDidUpdate：组件更新后调用

3）销毁：unmounting
删除虚拟dom，移除UI
1】componentWillUnmount：组件销毁后调用

9、state 和 props
1】state
a、state是用于组件内部的数据传递，组件的私有属性
b、constructor构造函数唯一可以初始化state的地方
c、需要使用setState来进行绑定，注意这里的setState是异步操作（react在这里会把多次修改的动作合并为一次）
2】props
a、用于父组件向子组件传递数据
b、只读属性，单向数据流（只能父组件里面修改，子组件不可改）
注：
e.target是指事件发生的元素
e.currentTarget是指事件绑定的元素
3】单向绑定
与vue不同，react中的受控组件比如input/select要建立双向绑定需要setState和onChange结合使用
可以使用状态管理工具mbox的observable和autobind
注意：
a、忌讳浅拷贝
对于state里面的参数对象，千万不要用浅拷贝，要用深拷贝
b、异步问题
因为this.setState()是异步的，所以某种特殊情况下，为了避免异步带来的困扰，可以直接：
this.setState.xxx = xxxxx，这样直接赋值的话，就是同步了

10、setState是同步还是异步？
setState本身是同步的，但是基于react本身性能机制，对setState做了优化：react会将多个setState的调用合并为1个来执行，也就是说，当执行setState的时候，state中的数据并不会马上更新。这样的合并操作可以提高性能。
新版写法