1、setState可能是异步的
解决：将一个函数传给setState
2、setState是浅合并
3、jsx的事件必须传入的是函数，而不是字符串，
onClick必须是小驼峰写法
onClick={handleChange}
React function 需要显式的调用e.preventDefault(）阻止默认行为。
4、在jsx中进行判断
可以用两种方式，使用&&运算符和三目运算符。
5、在组件的render方法中返回null，可以阻止组件渲染，且不会影响生命周期。
6、jsx中的列表渲染
jsx中的列表渲染一般使用map()方法。并且在生成的列表中，需要有一个唯一的key值。key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
7、什么是受控组件？
可以理解为组件依赖于数据变化。
一般我们将受控组件的state和组件本身的state结合起来，使组件的state成为唯一的数据源。
8、状态提升
在 React 应用中，任何可变数据应当只有一个相对应的唯一“数据源”。通常，state 都是首先添加到需要渲染数据的组件中去。然后，如果其他组件也需要这个 state，那么你可以将它提升至这些组件的最近共同父组件中。你应当依靠自上而下的数据流，而不是尝试在不同组件间同步 state。
9、< Fragment >标签
用来组合各种组件，可以简写为<></>。
10、React.lazy使用
const OtherComponent = React.lazy(() => import('./OtherComponent'));
然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。
import React, { Suspense, lazy } from 'react';
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
若组件加载失败，可以在最外层新增一个异常捕获组件来处理加载异常的情况。
React.lazy只支持默认导出。
11、Context提供了组件树之间数据传递的方法。
解决了prop需要层层传递的问题（共享全局数据）。API如下
- React.createContext()
- Context.Provider
- Class.contextType
- Context.Consumer
- Context.displayName
12、React中的错误边界组件
React中有一种组件叫错误边界。它相当于JavaScript中的catch{}，它可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。
但只有class组件才可以使用错误边界组件。
13、refs转发的使用
一般ref用在引用dom节点的场景中。
React.forwardRef可以用来传递ref
const FancyButton = React.forwardRef((props, ref) => (
<button ref={ref} className="FancyButton">
{props.children}
</button>
));
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;
- 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
- 我们通过指定 ref 为 JSX 属性，将其向下传递给 。
- React 传递 ref 给 forwardRef 内函数 (props, ref) => …，作为其第二个参数。
- 我们向下转发该 ref 参数到 ，将其指定为 JSX 属性。
- 当 ref 挂载完成，ref.current 将指向 DOM 节点。
|