学习笔记。

组合 vs 继承

1.React 中没有插槽的概念，子组件标签中的所有内容都会作为一个 children prop 传递给子组件，类似于默认插槽，而其他命名插槽则可以通过像传递 prop 一样传递给子组件；

2.组件可以接受任意 props ，包括基本类型，React 元素以及函数。

state & 生命周期

1.this.state只能在构造函数里赋值；

2.异步更新state可使用接受一个函数的setState

条件渲染

1.模板中表达式的值为布尔值、null、undefined时，不会输出任何字符；

2.render 方法中直接返回null可以阻止组件渲染（似乎返回true、false、undefined也能阻止）；

Context

Context 能让你将一些数据向组件树下所有的组件进行“广播”，所有的组件都能访问到这些数据，也能访问到后续的数据更新。

使用 Context 步骤：

1. React.createContext() 创建上下文对象
2. 使用上下文对象的 Provider 组件传递数据
3. 使用类组件的静态属性 contextType 订阅此上下文对象（如果想在函数式组件或想使用多个上下文对象，可以使用上下文对象的 Consumer 组件订阅上下文对象）
4. 使用类组件实例的 context 属性读取最近的上下文对象的值

使用 Context 场景：

在很多不同层级的组件需要访问相同的数据。

Context 确定：

使得组件复用性变差。

比 Context 更好的解决方案：

• 将组件自身传递下去

JSX

• React 元素只是调用 React.createElement(component, props, ...children) 的语法糖；
• 在属性中嵌入JavaScript表达式，不需要在大括号外面加上引号；
• 即使其他地方没有使用到 React ，而因为 JSX 只是语法糖，因此也要导入 React；
• 可以在 JSX 类型中使用点语法；
• 用户定义的组件必须以大写字母开头；
• 如果要在运行时选择类型，不能直接将表达式作为 React 元素类型，需要首先将类型赋值给一个大写字母开头的变量；
• 如果没给 prop 赋值，它的默认值是 true；
• 使用扩展运算符 ... 来在 JSX 中传递整个 props 对象；
• React 组件也能够返回存储在数组中的一组元素；
• props.children 和其他 prop 一样，它可以传递任意类型的数据，例如一个函数；
• 布尔类型、Null 以及 Undefined 将会忽略；
• JSX 中的注释，使用大括号将 js 多行注释包裹其中。

Hook

• Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。
• Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
• Hook 使你在无需修改组件结构的情况下复用状态逻辑。
• Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。
• 从概念上讲，React 组件一直更像是函数。而 Hook 则拥抱了函数，同时也没有牺牲 React 的精神原则。
• 没有计划从 React 中移除 class。

引入 Hook 的原因：

• 在组件之间复用状态逻辑很难；
• 复杂组件变得难以理解；
• 难以理解的 class。