React的API✅

createContext

createContext要和useContext配合使用，可以理解为 “React自带的redux或mobx” ，事实上redux就是用context来实现的。但是一番操作下来我还是感觉，简单的context对视图的更新的细粒度把控比不上mobx，除非配合memo等优化手段来优化。（redux只用过一次不是很会👋）

以下demo介绍context的简单使用：

// store.ts
import { createContext } from "react";
export const ThemeContext = createContext({theme: "light",setTheme: (_theme: string): void => {},
});
export const AuthContext = createContext({name: "boyiao",roleType: "admin",setRoleType: (_roleType: string): void => {},setName: (_name: string): void => {},
});

// Demo.js
import { useContext, useState } from "react";
import { ThemeContext, AuthContext } from "./store";const PageA = () => {console.log("Page Render");const { theme, setTheme } = useContext(ThemeContext);const { name, setName, roleType, setRoleType } = useContext(AuthContext);return (<div><button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Set Theme In Page</button><div>{theme}</div><div>{name}</div></div>);
};const OtherPage = () => {console.log("OtherPage Render");return (<div style={{ border: "1px solid red" }}><div>OtherPage</div></div>);
};function Demo() {const [theme, setTheme] = useState("light");const [name, setName] = useState("boyiao");const [roleType, setRoleType] = useState("admin");console.log("App Render");return (<><ThemeContext.Provider value={{ theme, setTheme }}><AuthContext.Provider value={{ name, setName, roleType, setRoleType }}><button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>Change Theme</button><button onClick={() => setRoleType(roleType === "admin" ? "user" : "admin")}>Change Auth</button><Page /></AuthContext.Provider></ThemeContext.Provider><OtherPage /> // 注意这玩意在Context之外</>);
}export default Demo;

为什么说“简单的context对视图的更新的细粒度把控比不上mobx”？项目中常见的情况是，我们有一些需要在全局共享的状态需要管理如userName、roleType、themeToken等，如果用context来管理，为了保证这些变量可改变并触发视图重新渲染，我们不得不在根组件里用useState来保存这些全局变量。但是如果这些全局的变量改变，重新渲染影响到的范围是从最顶层往下的，成本未免太高。
见上面那个demo，OtherPage不会用到context中的变量，但是每次全局变量更新，OtherPage也要重新渲染。

但是当然有办法解决， 用memo、useMemo来缓存就好了；或者我们把需要共享的变量进行一些作用域的划分，即不要把所有需要共享的变量都生命在Root组件里面，这些都是为了降低重绘（排）的成本， 只是需要在别的地方下点功夫。只是如果用mobx则方便很多，因为mobx要求开发者用observer来显示地绑定要监听的组件：

// store.ts
import { observable, configure, action } from "mobx";
configure({ enforceActions: "always" });
interface AccountMobx {userName: string;roleType: "admin" | "user";setUserName: (name: string) => void;setRoleType: (role: "admin" | "user" ) => void;
}
const accountMobx = observable<AccountMobx>({userName: "boyiao",roleType: "admin",setUserName(name: string) {this.userName = name;},setRoleType(role: "admin" | "user" ) {this.roleType = role;},},{setUserName: action,setRoleType: action}
);
export default accountMobx;

import { observer } from "mobx-react-lite";
import accountMobx from "./store";
const Demo = observer(() => {console.log("Demo render");return (<div><div>{accountMobx.userName}</div><buttononClick={() => accountMobx.setUserName(accountMobx.userName + "1")}>set userName</button></div>);
});
export default Demo;

import "./App.css";
import Demo from './ReactMobxDemo/index.tsx'
function App() {console.log("App rendered");return (<><Demo /><div className="App">// App Content</div></>);
}
export default App;

这样的好处很直接：Demo的更新影响不到App中的其他内容。

---

错误边界

只用过类组件的，主要借助类组件的 componentDidCatch （他可以捕获子组件渲染过程中的错误，并在渲染组件树的过程中向上冒泡，直到它被捕获为止。）生命周期。函数组件要实现这种功能相对复杂。

import React from "react";
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新状态以干掉后续的渲染return { hasError: true };}componentDidCatch(error, errorInfo) {// 可以在此处记录错误信息console.error("错误捕获：", error, errorInfo);}render() {if (this.state.hasError) {// 自定义的降级 UIreturn <h1>出了点问题，请稍后再试。</h1>;}return this.props.children;}
}

伟大无需多言。

---

createPoral（React DOM的API）

最近发布了一个图钉组件📌到npm上面，这个组件的实现就是借助了createPoral。

portal 允许组件将它们的某些子元素渲染到 DOM 中的不同位置。这使得组件的一部分可以“逃脱”它所在的容器。例如组件可以在页面其余部分上方或外部显示模态对话框和提示框。
portal 只改变 DOM 节点的所处位置。在其他方面，渲染至 portal 的 JSX 的行为表现与作为 React 组件的子节点一致。该子节点可以访问由父节点树提供的 context 对象、事件将从子节点依循 React 树冒泡到父节点。

考虑下面这个需求：在我的React应用中有一个比待标记的节点，我希望将它标记出来：即在页面的空白处打上一个「图钉」，并将「图钉」与这个「待标记的节点」用线连接（怎么画线先不管，在我的组件里我用div来做，这么简单怎么来）。
然后我希望实现的代码逻辑如下：

const HomePage = () => {return (<div id="container"><div id="targetDOM">这是你想要连接的元素</div><ThumbtackpopupContainerId="container"targetElementId="targetDOM"></Thumbtack></div>);
};

问题来了：Thumbtack要如何封装，才能让他里面的某些DOM节点跑到#container里面，和#targetDOM产生交互？这就是createPoral的作用。

const Thumbtack = ({popupContainerId,targetElementId
}: { popupContainerId: string,targetElementId: string
}) => {const [popupContainer, setPopupContainer] = useState(null);useEffect(() => {const popupRef = document.getElementById(popupContainerId);popupRef && setPopupContainer(popupRef);}, [])return (<div id='thumbtack'>{ popupContainer && createPortal(<div>📌</div>, popupContainer) }</div>)
}

最基本的思路就如上面这样简单，把📌挂载到和#targetDOM的同一个父节点下面，方便后续的绝对定位、transform等操作。但是createPoral改变的只是DOM元素渲染的位置，在上面那个Thumbtack中，< div>📌< /div>可以使用在Thumbtack里面定义的变量，而且他的事件冒泡也是冒泡到#thumbtack那里，而非#container那里。

---

forwardRef

forwardRef最常见的还是配合useImperativeHandle一块用，但单独使用也可以把自组件的某些DOM节点暴露给父组件。我都懒得写了直接看人家React官网吧。

---

keep-alive在react里如何实现？

• 现有的方案：react-activation
• 推荐关注的：React18 的 Offscreen
• 自己实现：保留关键数据（如滚动的距离、需要记录的关键状态……）