上面 {1,4-5} 行代码高亮，下面是 Markdown 代码示例
```jsx {1,4-5}
代码行高亮可以和代码行号一起使用。
添加注释配置 <!--rehype:tooltips--> 添加一个 Tooltips 提示。
列表添加 <!--rehype:className=shortcuts--> 样式类，展示快捷键样式。
export const Student = (
- <div className="Student"></div>
-);
+export const Student = <div>学生</div>;
+const school = <div>学校</div>;
+
+下面是 Markdown 代码示例
+ ```jsx showLineNumbers
从 v16.2.0 开始 Fragment 可用于返回多个子节点，而无需向 DOM 添加额外的包装节点。或者使用 <></> 效果是一样的。
const Student = () => (
- <>
+ <>
<Avatar src="./demo.jpg" />
<Profile username="name" />
- </>
+ </>
);
render() {
- return 'Look ma, no spans!';
+ return 'Look ma, no spans!';
}
您可以只返回一个字符串。查看: Fragments & strings
@@ -852,9 +852,400 @@ <Menu.Item>菜单二</Menu.Item> <Menu> +| 方法 | 描述 |
|---|---|
useReducer | useState 的替代方案 # |
useCallback | 返回一个回调函数 # |
useMemo | 返回一个 memoized 值# |
useRef | 返回一个可变的 ref 对象 # |
useImperativeHandle | 暴露给父组件的实例值 # |
useLayoutEffect | DOM 变更后同步调用函数 # |
useDebugValue | 开发者工具中显示标签 # |
useDeferredValue | 接受并返回该值的新副本 # |
useTransition | 过渡任务的等待状态 # |
useId | 用于生成唯一 ID # |
function Counter({ initialCount }) {
+ const [count, setCount] = useState(initialCount);
+ return (
+ <>
+ Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button>
+ <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
+ <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
+ </>
+ );
+}
+function TextInputWithFocusButton() {
+ const $input = useRef(null);
+ const onButtonClick = () => {
+ $input.current.focus();
+ };
+ return (
+ <>
+ <input ref={$input} type="text" />
+ <button onClick={onButtonClick}>
+ 聚焦输入
+ </button>
+ </>
+ );
+}
+current 指向已挂载到 DOM 上的文本输入元素
function FancyInput(props, ref) {
+ const inputRef = useRef();
+ useImperativeHandle(ref, () => ({
+ focus: () => {
+ inputRef.current.focus();
+ }
+ }));
+ return <input ref={inputRef} />;
+}
+FancyInput = forwardRef(FancyInput);
+父组件使用
+<FancyInput ref={inputRef} />
+inputRef.current.focus()
+useEffect(() => {
+ const subs = props.source.subscribe();
+ return () => {
+ subs.unsubscribe();
+ };
+}, [props.source]);
+const memoizedCallback = useCallback(
+ () => {
+ doSomething(a, b);
+ },
+ [a, b],
+);
+const memoizedValue = useMemo(
+ () => {
+ return computeExpensiveValue(a, b)
+ },
+ [a, b]
+);
+function Checkbox() {
+ const id = useId();
+ return (
+ <>
+ <label htmlFor={id}>
+ 你喜欢React吗？
+ </label>
+ <input id={id} type="checkbox" />
+ </>
+ );
+};
+用于生成跨服务端和客户端稳定的唯一 ID 的同时避免 hydration 不匹配
function useFriendStatus(friendID) {
+ const [
+ isOnline, setIsOnline
+ ] = useState(null);
+ // ...
+ // 在开发者工具中的这个 Hook 旁边显示标签
+ // e.g. "FriendStatus: Online"
+ useDebugValue(
+ isOnline ? 'Online' : 'Offline'
+ );
+ return isOnline;
+}
+不推荐你向每个自定义 Hook 添加 debug 值
useEffect(
+ () => {
+ // componentDidMount
+ // 组件挂载时，可以在这里完成你的任务
+ return () => {
+ // componentWillUnmount
+ // 卸载时执行，清除 effect
+ };
+ },
+ [ ]
+);
+这是一个类似 class 组件中 componentDidMount & componentWillUnmount 两个生命周期函数的写法。
| 方法 | 描述 |
|---|---|
constructor (props) | 渲染前 # |
static getDerivedStateFromProps() | 调用 render 方法之前调用 # |
render() | class 组件中唯一必须实现的方法 # |
componentDidMount() | 在组件挂载后(插入 DOM 树中)立即调用 # |
UNSAFE_componentWillMount() | 在挂载之前被调用，建议使用 constructor() # |
在 constructor() 上设置初始状态。在 componentDidMount() 上添加 DOM 事件处理程序、计时器（等），然后在 componentWillUnmount() 上删除它们。
| 方法 | 描述 |
|---|---|
componentWillUnmount() | 在组件卸载及销毁之前直接调用 # |
| 方法 | 描述 |
|---|---|
static getDerivedStateFromProps(props, state) | 调用 render 之前调用，在初始挂载及后续更新时都会被调用 # |
shouldComponentUpdate(nextProps, nextState) | 如果返回 false，则跳过 render() # |
render() | 在不修改组件 state 的情况下，每次调用时都返回相同的结果 # |
getSnapshotBeforeUpdate() | 在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置） # |
componentDidUpdate() | 这里使用 setState()，但记得比较 props。首次渲染不会执行此方法 # |
class Welcome extends React.Component {
+ render() {
+ return <h1>Hello, {this.props.name}</h1>;
+ }
+}
+constructor(props) {
+ super(props);
+ // 不要在这里调用 this.setState()
+ this.state = { counter: 0 };
+ this.handleClick = this.handleClick.bind(this);
+}
+class ErrorBoundary extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(error) {
+ // 更新 state 使下一次渲染可以显降级 UI
+ return { hasError: true };
+ }
+
+ render() {
+ if (this.state.hasError) {
+ // 你可以渲染任何自定义的降级 UI
+ return <h1>Something went wrong.</h1>;
+ }
+
+ return this.props.children;
+ }
+}
+componentDidUpdate(prevProps) {
+ // 典型用法（不要忘记比较 props）：
+ if (this.props.uid !== prevProps.uid) {
+ this.fetchData(this.props.uid);
+ }
+}
+getSnapshotBeforeUpdate(prevProps, prevState) {
+ // 我们是否在 list 中添加新的 items ？
+ // 捕获滚动位置以便我们稍后调整滚动位置。
+ if (prevProps.list.length < this.props.list.length) {
+ const list = this.listRef.current;
+ return list.scrollHeight - list.scrollTop;
+ }
+ return null;
+}
+import PropTypes from 'prop-types'