a378313814的博客

hooks 和 class 的区别// hoos 更容易复用代码，代码量更少// hooks 响应式的 useEffect，如果依赖不正确，会被意外的触发// hooks 状态不同步，由于是闭包，所以有异步操作的时候，经常会碰到异步回调的变量引用是之前的// 复杂逻辑使用class，后期更容易维护import React, { useState, useRef, useEffect } from "react";​import React, { useState } from "react";

为何必须引用ReactJSX是React.createElement(component, props, …children)方法的语法糖。自定义的React组件为何必须大写如果是小写的话就会被当做一个字符串传入<app>APP</app> => React.createElement('app',null,'APP')<APP>APP</APP> => React.createElement(APP,null,'APP')..

在React 中如何做到拦截用户操作用户刷新，关闭当前tab页，关闭浏览器触发以下事件需要注意的是，这个事件监听，需要用户在浏览器有操作，否则不会生效 useEffect(() => { const listener = (ev: any) => { ev.preventDefault(); ev.returnValue = '离开咯'; }; window.addEventListener('beforeunload', listener)

redux为什么出现：React 有 props 和 state ，React 没有数据向上回溯的能力，唯一的方法是提升state到公用组件当中，子组件触发父组件的回调修改state。为了更好的管理state状态，引入了专业的React顶层state分发给所有React 应用三大原则：单一数据源： 整个应用的state存储在一棵 object tree 中，并且这个object tree 只存在于唯一一个store中state是只读的：唯一改变state的就是action，使用纯函数来执行修改：

context.jsimport React, { createContext, useContext, useReducer } from 'react';// 引入默认配置import { reducer, defaultState } from './store';export const StateContext = createContext({});export const MutationContext = createContext({});export const Con