以下是一些更高级的 react 概念和术语：
12。上下文 api
context api 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。它对于主题、身份验证或用户数据等全局数据很有用。
示例：
const themecontext = react.createcontext('light');
function themedbutton() {
return (
<themecontext.consumer>
{theme => <button classname={theme}>i am styled by {theme} theme!</button>}
</themecontext.consumer>
);
}
function app() {
return (
<themecontext.provider value="dark">
<themedbutton />
</themecontext.provider>
);
}
13。参考文献
refs 提供了一种访问 dom 节点或在 render 方法中创建的 react 元素的方法。它通常用于直接修改 dom 元素或管理焦点。
示例：
import { useref } from 'react';
function textinputwithfocusbutton() {
const inputel = useref(null);
const onbuttonclick = () => {
inputel.current.focus();
};
return (
<div>
<input ref={inputel} type="text" />
<button onclick={onbuttonclick}>focus the input</button>
</div>
);
}
14。高阶组件 (hoc)
hoc 是一个接受组件并返回新组件的函数。它经常用于重用组件逻辑。
示例：
function withlogger(wrappedcomponent) {
return function withlogger(props) {
console.log('rendering component');
return <wrappedcomponent {...props} />;
};
}
const enhancedcomponent = withlogger(mycomponent);
15。 react.memo
react.memo 是一个高阶组件，它通过记忆组件来帮助优化性能。如果 props 没有改变，组件将跳过重新渲染。
示例：
const mycomponent = react.memo(function mycomponent(props) {
return <div>{props.text}</div>;
});
16。使用reducer hook
usereducer 钩子是 usestate 的替代方案。它对于管理更复杂的状态逻辑非常有用，特别是当状态依赖于先前的值时。
示例：
import { usereducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new error();
}
}
function counter() {
const [state, dispatch] = usereducer(reducer, { count: 0 });
return (
<div>
<button onclick={() => dispatch({ type: 'decrement' })}>-</button>
<span>{state.count}</span>
<button onclick={() => dispatch({ type: 'increment' })}>+</button>
</div>
);
}
17。反应片段
react fragments 让您可以对子级列表进行分组，而无需向 dom 添加额外的节点。
示例：
function table() {
return (
<>
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
</>
);
}
18。传送门
门户提供了一种将子组件渲染到父组件层次结构之外的 dom 节点的方法。
示例：
import reactdom from 'react-dom';
function modal({ children }) {
return reactdom.createportal(
<div classname="modal">{children}</div>,
document.getelementbyid('modal-root')
);
}
19。误差边界
错误边界是 react 组件，可以在其子组件树中的任何位置捕获 javascript 错误，记录这些错误并显示后备 ui。
示例：
class errorboundary extends react.component {
constructor(props) {
super(props);
this.state = { haserror: false };
}
static getderivedstatefromerror(error) {
return { haserror: true };
}
render() {
if (this.state.haserror) {
return <h1>something went wrong.</h1>;
}
return this.props.children;
}
}
20。延迟加载
react 支持组件延迟加载，这意味着组件可以在需要时异步加载，从而提高大型应用程序的性能。
示例：
import react, { suspense } from 'react';
const othercomponent = react.lazy(() => import('./othercomponent'));
function mycomponent() {
return (
<suspense fallback={<div>loading...</div>}>
<othercomponent />
</suspense>
);
}
21。严格模式
strictmode 是一个用于突出显示应用程序中潜在问题的工具。它不会呈现任何可见的 ui，但会检查是否存在已弃用的生命周期方法等问题。
示例：
function app() {
return (
<react.strictmode>
<mycomponent />
</react.strictmode>
);
}
22。受控组件与非受控组件
受控组件：表单元素，其值由 react 状态控制。
不受控制的组件：由 dom 处理值的表单元素。
example of controlled component:
function controlledinput() {
const [value, setvalue] = usestate('');
return (
<input
type="text"
value={value}
onchange={(e) => setvalue(e.target.value)}
/>
);
}
example of uncontrolled component:
function uncontrolledinput() {
const inputref = useref(null);
return <input type="text" ref={inputref} />;
}
23。支柱钻井
当数据通过多个级别的组件向下传递以到达深层嵌套的子组件时，就会发生 prop drilling。通过使用 context api 或状态管理库可以避免这种情况。
example of prop drilling:
function grandparent() {
const name = "john";
return <parent name={name} />;
}
function parent({ name }) {
return <child name={name} />;
}
function child({ name }) {
return <p>{name}</p>;
}
24。渲染生命周期
react 组件有一个生命周期，其中包含在不同阶段调用的方法，例如安装、更新和卸载。
生命周期方法（类组件）：
- - componentdidmount
- - componentdidupdate
- - componentwillunmount
示例：
class mycomponent extends react.component {
componentdidmount() {
console.log('component mounted');
}
componentdidupdate() {
console.log('component updated');
}
componentwillunmount() {
console.log('component will unmount');
}
render() {
return <div>hello!</div>;
}
}
25。 useref hook
useref 钩子用于在渲染之间保留值，而不会导致重新渲染。它通常用于访问 dom 元素或存储可变值。
示例：
function Timer() {
const countRef = useRef(0);
useEffect(() => {
const intervalId = setInterval(() => {
countRef.current += 1;
console.log(countRef.current);
}, 1000);
return () => clearInterval(intervalId);
}, []);
return <p>Check the console to see the timer.</p>;
}
这些附加概念将帮助您加深对 react 的理解并应对更高级的场景！
