From ead88e2df897a192b66dcf17ae393fac300d5f63 Mon Sep 17 00:00:00 2001 From: zqran Date: Wed, 14 Sep 2022 22:14:38 +0800 Subject: [PATCH] [Beta] Update links and add semicolons in API/react Doc (#5054) * [Beta] Update some document content format in API Doc * [Beta] Remove semicolon from intro * [Beta] Add semicolon --- beta/src/content/apis/react/Suspense.md | 2 +- beta/src/content/apis/react/index.md | 28 +++++++++++------------ beta/src/content/apis/react/useContext.md | 10 ++++---- beta/src/content/apis/react/useReducer.md | 4 ++-- beta/src/content/apis/react/useRef.md | 2 +- 5 files changed, 23 insertions(+), 23 deletions(-) diff --git a/beta/src/content/apis/react/Suspense.md b/beta/src/content/apis/react/Suspense.md index 7f8fd44c..860b0abd 100644 --- a/beta/src/content/apis/react/Suspense.md +++ b/beta/src/content/apis/react/Suspense.md @@ -12,7 +12,7 @@ This section is incomplete, please see the old docs for [Suspense.](https://reac ```js -}> +}>{...} ``` diff --git a/beta/src/content/apis/react/index.md b/beta/src/content/apis/react/index.md index 4fe259c5..68259a50 100644 --- a/beta/src/content/apis/react/index.md +++ b/beta/src/content/apis/react/index.md @@ -111,7 +111,7 @@ Create a component that forward the ref attribute: ```js const Component = forwardRef((props, ref) => { - // ... + // ... }); ``` @@ -134,7 +134,7 @@ useImperativeHandle(ref, () => { Create a ref (typically for class components): ```js -this.ref = createRef(); +this.ref = createRef(); ``` @@ -159,7 +159,7 @@ Define a pure component as a class: ```js class MyComponent extends React.PureComponent { - // ... + // ... } ``` @@ -173,12 +173,12 @@ Return multiple elements: ```js function MyComponent() { - return ( - <> -

Title

-

Subtitle

- - ); + return ( + <> +

Title

+

Subtitle

+ + ); } ``` @@ -237,7 +237,7 @@ React.cloneElement(element, props); Verifies the object is a React element: ```js -React.isValidElement(object) +React.isValidElement(object); ``` @@ -313,7 +313,7 @@ useEffect(() => { return () => { unsubscribe(); } -}, [props.userId]) +}, [props.userId]); ``` @@ -325,7 +325,7 @@ Read layout DOM state: ```js useLayoutEffect(() => { // Read DOM layout -}) +}); ``` @@ -337,7 +337,7 @@ Insert styles into the DOM. ```js useInsertionEffect(() => { // Insert styles -}) +}); ``` @@ -374,7 +374,7 @@ Return a memoized component. ```js const MyComponent = React.memo(function MyComponent(props) { - // ... + // ... }); ``` diff --git a/beta/src/content/apis/react/useContext.md b/beta/src/content/apis/react/useContext.md index a03c3937..93f89abf 100644 --- a/beta/src/content/apis/react/useContext.md +++ b/beta/src/content/apis/react/useContext.md @@ -917,7 +917,7 @@ ul, li { margin: 0; padding: 0; } ### Specifying a fallback default value {/*specifying-a-fallback-default-value*/} -If React can't find any providers of that particular context in the parent tree, the context value returned by `useContext()` will be equal to the default value that you specified when you [created that context](/apis/react/useContext): +If React can't find any providers of that particular context in the parent tree, the context value returned by `useContext()` will be equal to the default value that you specified when you [created that context](/apis/react/createContext): ```js [[1, 1, "ThemeContext"], [3, 1, "null"]] const ThemeContext = createContext(null); @@ -1279,7 +1279,7 @@ function MyApp() { Here, the context value is a JavaScript object with two properties, one of which is a function. Whenever `MyApp` re-renders (for example, on a route update), this will be a *different* object pointing at a *different* function, so React will also have to re-render all components deep in the tree that call `useContext(AuthContext)`. -In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/apis/react/usecallback) and wrap the object creation into [`useMemo`.](/apis/usememo) This is a performance optimization: +In smaller apps, this is not a problem. However, there is no need to re-render them if the underlying data, like `currentUser`, has not changed. To help React take advantage of that fact, you may wrap the `login` function with [`useCallback`](/apis/react/useCallback) and wrap the object creation into [`useMemo`](/apis/react/useMemo). This is a performance optimization: ```js {1,6-9,11-14} import { useCallback, useMemo } from 'react'; @@ -1327,16 +1327,16 @@ function MyComponent() { #### Parameters {/*parameters*/} -* `SomeContext`: The context that you've previously created with [`createContext`.](/apis/react/useContext) The context itself does not hold the information, it only represents the kind of information you can provide or read from components. +* `SomeContext`: The context that you've previously created with [`createContext`](/apis/react/createContext). The context itself does not hold the information, it only represents the kind of information you can provide or read from components. #### Returns {/*returns*/} -`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/apis/react/useContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. +`useContext` returns the context value for the calling component. It is determined as the `value` passed to the closest `SomeContext.Provider` above the calling component in the tree. If there is no such provider, then the returned value will be the `defaultValue` you have passed to [`createContext`](/apis/react/createContext) for that context. The returned value is always up-to-date. React automatically re-renders components that read some context if it changes. #### Caveats {/*caveats*/} * `useContext()` call in a component is not affected by providers returned from the *same* component. The corresponding `` **needs to be *above*** the component doing the `useContext()` call. -* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/apis/memo) does not prevent the children receiving fresh context values from above. +* React **automatically re-renders** all the children that use a particular context starting from the provider that receives a different `value`. The previous and the next values are compared with the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Skipping re-renders with [`memo`](/apis/react/memo) does not prevent the children receiving fresh context values from above. * If your build system produces duplicates modules in the output (which can happen if you use symlinks), this can break context. Passing something via context only works if `SomeContext` that you use to provide context and `SomeContext` that you use to read it are ***exactly* the same object**, as determined by a `===` comparison. --- diff --git a/beta/src/content/apis/react/useReducer.md b/beta/src/content/apis/react/useReducer.md index 90717246..bbfe2978 100644 --- a/beta/src/content/apis/react/useReducer.md +++ b/beta/src/content/apis/react/useReducer.md @@ -904,7 +904,7 @@ function MyComponent() { --- -### `dispatch` functions {/*dispatch*/} +### `dispatch` function {/*dispatch*/} The `dispatch` function returned by `useReducer` lets you update the state to a different value and trigger a re-render. You need to pass the action as the only argument to the `dispatch` function: @@ -1081,7 +1081,7 @@ If you can't find the cause of this error, click on the arrow next to the error ### My reducer or initializer function runs twice {/*my-reducer-or-initializer-function-runs-twice*/} -In [Strict Mode](/apis/react/strictmode), React will call your reducer and initializer functions twice. This shouldn't break your code. +In [Strict Mode](/apis/react/StrictMode), React will call your reducer and initializer functions twice. This shouldn't break your code. This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and reducer functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes and fix it. diff --git a/beta/src/content/apis/react/useRef.md b/beta/src/content/apis/react/useRef.md index fe79e56e..ded441b6 100644 --- a/beta/src/content/apis/react/useRef.md +++ b/beta/src/content/apis/react/useRef.md @@ -545,7 +545,7 @@ If you try to pass a `ref` to your own component like this: ```js const inputRef = useRef(null); -return +return ; ``` You might get an error in the console: