相关文章
react api
一、forwardRef
forwardRef 是一个高阶组件，用于在函数式组件中转发 ref 属性。它允许函数式组件接收 ref 并将其传递给子组件或 DOM 元素。
forwardRef 接收一个函数作为参数，该函数接收两个参数：props 和 ref，然后返回一个 React 元素。在函数中，我们可以通过将 ref 作为第二个参数传递给子组件或 DOM 元素，从而实现 ref 的转发。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| import React, { forwardRef, useRef, useImperativeHandle } from 'react';
const MyComponent = forwardRef((props, ref) => {
const inputRef = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return (
<div>
<input ref={inputRef} type="text" />
</div>
);
});
function App() {
const myComponentRef = useRef(null);
const handleClick = () => {
myComponentRef.current.focus();
};
return (
<div>
<MyComponent ref={myComponentRef} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
}
|
二、lazy
lazy 是 React 提供的一个高级组件，用于实现组件的延迟加载（懒加载）。它允许你在需要时动态地加载组件，而不会在应用程序初始化时立即加载所有组件，从而提高了应用程序的性能和加载速度。
lazy 函数接收一个函数作为参数，这个函数返回一个动态 import() 调用。这个 import() 调用会异步地加载组件的代码块，并返回一个 Promise，一旦代码加载完成，就会解析为一个组件。在组件加载完成之前，lazy 返回的组件将是一个在加载期间显示的占位符组件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
export default App;
|
三、memo
React.memo 是 React 提供的一个高阶组件，用于优化函数式组件的性能。它类似于类组件中的 PureComponent，可以避免不必要的重新渲染，从而提高组件的性能。
React.memo 接收一个函数式组件作为参数，并返回一个经过优化的函数式组件。它通过对比前后两次渲染时的 props 是否相等来判断是否需要重新渲染组件。如果 props 没有发生变化，则 React.memo 将会使用上一次渲染的结果，从而避免了组件的重新渲染。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| import React from 'react';
const MyComponent = ({ name }) => {
console.log('Rendering MyComponent');
return <div>Hello, {name}!</div>;
};
const MemoizedMyComponent = React.memo(MyComponent);
function App() {
const [name, setName] = React.useState('World');
const handleClick = () => {
setName('React');
};
return (
<div>
<MemoizedMyComponent name={name} />
<button onClick={handleClick}>Change Name</button>
</div>
);
}
export default App;
|
四、startTransition
startTransition 用于启动一个优先级较低的异步更新。它可以帮助开发者在需要时将一些较为耗时的更新任务推迟到浏览器空闲时执行，从而提高页面的响应速度和用户体验。
startTransition 函数接收一个回调函数作为参数，在这个回调函数中可以执行需要延迟执行的更新任务。当浏览器处于空闲状态时，React 会优先执行这些任务，从而避免了在页面交互过程中出现卡顿现象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| import React, { useState, startTransition } from 'react';
function App() {
const [text, setText] = useState('');
const handleClick = () => {
startTransition(() => {
setText('Updating...');
setTimeout(() => {
setText('Updated!');
}, 2000);
});
};
return (
<div>
<p>{text}</p>
<button onClick={handleClick}>Update Text</button>
</div>
);
}
export default App;
|
五、createContext
createContext 是 React 提供的一个用于创建 Context 的 API。Context 在 React 应用程序中用于跨组件层级传递数据，允许在组件树中的任何地方访问共享的数据，而不必手动逐层传递 props。
使用 createContext 可以创建一个 Context 对象，该对象包含两个组件：Provider 和 Consumer。Provider 用于提供共享的数据，而 Consumer 用于消费这些共享的数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| import React from 'react';
const MyContext = React.createContext();
function App() {
const sharedData = 'Hello from Context';
return (
<MyContext.Provider value={sharedData}>
<ChildComponent />
</MyContext.Provider>
);
}
function ChildComponent() {
return (
<MyContext.Consumer>
{value => <div>{value}</div>}
</MyContext.Consumer>
);
}
|
