牛客刷题知识点-React

1、React支持的键盘事件有onKeyDown（刚按下），onKeyPress（按着），onKeyUp（即将放开）。思考一下，如果有onKey事件，那么触发时机就不明确，所以没有onKey事件。

2、React Router中的组件主要有三类:

routers, 路由，例如<BrowserRouter> 、 <HashRouter>

route matchers,路由匹配 如 <Route> 、<Switch>

navigation,导航，如 <Link>、 <NavLink>、<Redirect>

以上的这些组件都是从react-router-dom中引入。

3、当Suspense标签内有懒加载组件，在懒加载组件渲染完成之前页面显示的是fallback熟悉指向的内容。

4、可以把 useEffect 看做如下三个函数的组合 componentDidMount()、componentDidUpdate()、componentWillUnmount()，可以模拟挂载、更新、卸载三个阶段

5、ReactDOM.unmountComponentAtNode() 用于从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除

如果指定容器上没有要删除的组件，则函数什么也不会做，返回 false

如果指定容器上有要删除的组件，则移除组件，返回 true

6、＊匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。（贪婪模式和非贪婪模式：贪婪模式在整个表达式匹配成功的前提下，尽可能多的匹配，而非贪婪模式在整个表达式匹配成功的前提下，尽可能少的匹配。)

7、usDebugValue 可用于在 React 开发者工具中显示自定义 Hook 的标签。

8、通过useState可以在函数式组件中使用state。

9、react支持的剪贴板事件有onCopy（拷贝），onCut（剪切），onPaste（粘贴）

10、React 复合事件有oncompositionEnd ,oncompositionStart , onCompositionUpdate

11、React 支持的触摸事件有：onTouchCancel 中断, onTouchEnd移开 ,onTouchMove移动 ,onTouchStart 触摸

12、适合使用refs的情况：

1.管理焦点，文本选择或媒体播放。

2.触发强制动画。

3.集成第三方 DOM 

13、Router : react - router 的重要组件，它能保持 I 和 URL 的同步。 RoutingContext ：在 context 中给定路由 的 state 、设置 history 对象和当前的 location , <RoutingContext＞就会去渲染组件树。 Link :允许用户浏览应用的主要方式，<Link>以适当的 href 去渲染一个可访问的锚标签。 没有内置组件 DefaultLink

14、ReactDOM . unmountcomponentAtNode ,从 DOM 中卸载组件，会将其事件处理器 ( event handlers ）和 state 一并清除。如果指定容器上没有对应已挂载的组件，这个函数什么也不会做。如果组件被移除将会返回 true ，如果没有组件可被移除将会返回 false 。

15、StrictMode组件的作用是：1.本质是一个组件，该组件不进行UI渲染（类似于Fragment组件）。2.对后代组件进行如下检查：识别不安全的生命周期，使用过时字符串 ref API 的警告，使用废弃的 findDOMNode 方法的警告，检测意外的副作用（React要求，副作用代码仅出现在以下生命周期函数中ComponentDidMount，ComponentDidUpdate，ComponentWillUnMount）

16、使用JSX编写的代码将会被转换成使用React.createElement()的形式，React.createElement：创建并返回指定类型的新React元素。

17、HashHistory

hashHistory的原理是利用html的锚点(#)，通过改变location.hash去修改浏览器history。

这种实现方式优势是实现和使用都比较简单，缺点是不够美观，服务器无法记录用户浏览路径。

BrowserHistory

browserHistory利用了H5 新增的history API去修改浏览器记录，其提供的push方法本质上等于history.pushState+notifiy(listeners)（通知Router重新渲染）。

优点是美观，可以存储状态，服务器可以记录用户浏览路径。缺点是需要服务器配置支持，因为pathname的每一次改变都需要发请求，服务器如不做相应配置会报404错误

MemoryHistory

memoryHistory在内存中保存着自己的location数组。在创建memory history的时候你可以传入一些信息用于设置初始状态。这个状态包括：保存在数组中的位置信息以及当前位置在这个数组中的索引。

通常用于非浏览器环境（node或React native app）

18、useLayoutEffect和useEffect 异同

相同点

都接受一个函数一个数组，只有在数组里面的值改变的情况下才会再次执行 effect 函数

不同点

useEffect 是异步执行的，而useLayoutEffect是同步执行的

useEffect 的执行时机是浏览器完成渲染之后

useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价

19、Reducer是Redux中的工作流程,Reducer是一个纯函数,一个函数的返回结果只依赖其参数，并且执行过程中没有副作用。属于纯函数

20、ReactDOM.createPortal 函数可以将子节点渲染到存在于父组件以外的 DOM 节点上

21、React 支持的动画事件有：onAnimationStart ,onAnimationEnd ,onAnimationlteration。

22、事件绑定this的方法有四种： （1）render方法中使用bind； （2）render方法中使用箭头函数；（3）constructor中bind； （4）定义阶段使用箭头函数绑定；、

23、1.Fragment不会生成额外的dom节点。 2.可以缩写成<>。缩写前唯一可以写的属性是key，缩写后没有任何属性。 3.因为不会产生额外的dom节点，常用于 Column=（<>Hello World

24、Hook 使用规则： 1．只能在函数最外层调用 Hook ，不要在循环、条件判断或者子函数中调用； 2．只能在 React 的函数组件或自定义的 Hook 中调用 Hook ，不要在其他 JavaScript 函数中调用。

25、React.lazy可以让你在代码中动态引入组件，React.Suspense搭配使用，在lazy懒加载完成之前先展示Suspense里面的组件。

26、错误边界生命周期getDerivedStateFromError和componentDidCatch： 1. 目的：某些UI崩溃，不至于整个webapp崩溃 2. 注意：错误边界无法捕获如下场景的错误：事件处理，异步代码（例如 setTimeout 或requestAnimationFrame 回调函数），服务端渲染以及它自身抛出来的错误（并非它的子组件）

27、store.getState()：获取状态

store.dispatch({ type: xxx, data: xxx })：分发动作对象

store.subscribe(() => console.log('@'))：设置监听函数，一旦 State 发生变化，就自动执行这个函数

28、portal 保留它在React树中的位置，不管它在DOM树中的实际位置。这意味着在portal 中触发的事件将向上传播到包含React树中的祖先，即使它在DOM树的其他地方

29、<redirect>组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由，访问/inbox/messages/3，会自动跳转到/messages/3</redirect>

30、ReactDOM.render() 不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有子节点的情况下，将组件插入已有的 DOM 节点中。

31、严格模式只在开发环境使用，生产环境中不生效。

32、Redux三大原则

单一数据源

State是只读的

使用纯函数来执行修改

33、findDOMNode 只在已挂载的组件上可用（即已经放置在 DOM 中的组件）。如果你尝试调用未挂载的组件（例如在一个还未创建的组件上调用 render()中的 findDOMNode()）将会引发异常。

34、action描述的是已发生的，要改变state的唯一方法是action

35、1.Mobx是单向数据流。 2.计算值都是纯净的。 3.衍生都是同步更新的。 4.衍生都是原子级的更新，看不到中间值。

36、当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值