《React官方文档》学习笔记

一、核心概念

 官方文档地址：Hello World – React (docschina.org)

1、JSX更接近Javascript，因此采用驼峰命名法。原生HTML标签要小写，组件开头字母要大写。

2、React DOM在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS（跨站脚本）攻击。

3、state的更新可能是异步的：出于性能考虑，React可能会把多个setState()调用合并成一个调用。因此不要依赖this.props和this.state的值更新下一个状态。

4、包含state的组件称为有状态组件，函数组件称为无状态组件。

5、key的问题：key会传递信息给React，但不会传递给你的组件（如果需要使用key则需要用其他属性名显式传递这个值）；元素的key只有放在就近的数组上下文中才有意义（要跟数组的使用放在相同层次，不能放在li标签上）；在map()方法中的元素需要设置key属性。

二、高级指引

三、API REFERENCE

1、class组件中，构造函数仅用于以下两种情况：通过给this.state赋值对象来初始化内部state；为事件处理函数绑定实例。

四、HOOK

1、Hook在class内部是不起作用的，但可以通过hook来取代class。

2、Hook使用了JavaScript的闭包机制，在函数销毁后仍能够访问到state，将useEffect放在组件内部可以让我们在effect中直接访问state变量（或其他props）——这些数据已经保存在了作用域中。

3、useEffect用来操作effect（副作用：数据获取、订阅、修改DOM等），可以看作class组件中componentDidMount、componentDidUpdate、componentWillUnmount生命周期函数的组合。React将按照effect声明的顺序依次调用组件中的每一个effect。

注：与componentDidMount或componentDidUpdate不同，使用useEffect调度的effect不会阻塞浏览器更新屏幕，这让应用看起来响应更快。大多数情况下，effect不需要同步执行。

useEffect包含两个参数：第一个参数是函数，操作副作用；第二个参数是数组，跳过effect进行性能优化（仅当数组内的参数发生变化时进行更新，如果数组是空则仅在组件挂载和卸载时执行）。

不需要清除副作用的useEffect：不返回，相当于componentDidMount+componentDidUpdate；

需要清除副作用的useEffect：返回函数里写清除函数，相当于componentDidMount+componentDidUpdate+componentWillUnmount；

特别注意：effect的清除阶段在每次重新渲染时都会执行，而不是只在卸载组件的时候执行一次。