React从入门到放弃
Component 组件
React组件中用花括号包含的JS代码会被执行,然后执行结果被嵌入组件中 组件名称必须大写
由于root元素是必须的，但是如果每个都加上 <div></div> 可能导致额外的div层级，这时候可以使用 <></> 简写来规避这个问题，同时解决root元素的问题.
NB: 不要在组件中定义组件
NB: 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
props
表示组件的入参
const Hello = (props) => {
return (
<div>
<p>Hello {props.name}</p>
</div>
)
}
props会被当做一个object传入组件,如果传入props的参数是通过JS执行后得到的，需要用花括号包裹。 最后传入props的是变量的值，和执行的结果。 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
JSX
https://zh-hans.reactjs.org/docs/introducing-jsx.html
JSX提供了一种类似HTML的标签语法用来表示组件内容，最后会被编译成JS代码，如果使用 create-react-app 创建的项目
是通过 Babel 进行编译的。
看起来很像一种模板语言。 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式
由于JSX的"XML-like”,标记必须关闭。 <br />
受控组件
在 HTML 中，表单元素（如、 和 ）之类的表单元素通常自己维护 state，并根据用户输入进行更新。 而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
input 不需要 event.preventDefault(), 因为它本身不像表单提交没有默认的行为
Hooks
Hooks的规则
useState, useEffect 不要在循环，条件表达式，或者任何不是定义组件的函数中调用.
必须保证hooks总是被固定的顺序被调用
State-hooks
import React, { useState } from 'react'
在React中最好不要直接修改state本身,变更state一般通过给state赋值新的对象方式进行. 直接修改state本身会造成一些不易察觉的错误，比如对array类型的state使用push方法
Effect-hooks
- useEffect 做了什么？
通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。
React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。
某种意义上讲，effect 更像是渲染结果的一部分 —— 每个 effect “属于”一次特定的渲染。
```js
import React, { useState, useEffect } from 'react';
useEffect(() => {
document.title = `You clicked ${count} times`;
});
```
- 为什么在组件内部调用 useEffect？
将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。
- useEffect 会在每次渲染后都执行吗？
是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。
- 为什么要在 effect 中返回一个函数？
这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。
如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分。
- React 何时清除 effect？
React 会在组件卸载的时候执行清除操作。
正如之前学到的，effect 在每次渲染的时候都会执行。
这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。
- 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行）
可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。