以下是一些更高级的 react 概念和术语：
12。上下文 api
context api 提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。它对于主题、身份验证或用户数据等全局数据很有用。
示例：
const themecontext = react.createcontext('light');function themedbutton() { return ( {theme => } );}function app() { return ( );}
13。参考文献
refs 提供了一种访问 dom 节点或在 render 方法中创建的 react 元素的方法。它通常用于直接修改 dom 元素或管理焦点。
示例：
import { useref } from 'react';function textinputwithfocusbutton() { const inputel = useref(null); const onbuttonclick = () => { inputel.current.focus(); }; return ( );}
14。高阶组件 (hoc)
hoc 是一个接受组件并返回新组件的函数。它经常用于重用组件逻辑。
示例：
function withlogger(wrappedcomponent) { return function withlogger(props) { console.log('rendering component'); return ; };}const enhancedcomponent = withlogger(mycomponent);
15。 react.memo
react.memo 是一个高阶组件，它通过记忆组件来帮助优化性能。如果 props 没有改变，组件将跳过重新渲染。
示例：
const mycomponent = react.memo(function mycomponent(props) { return {props.text};});
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 ( {state.count} );}
17。反应片段
react fragments 让您可以对子级列表进行分组，而无需向 dom 添加额外的节点。
示例：
function table() { return ( row 1 row 2 18。传送门
门户提供了一种将子组件渲染到父组件层次结构之外的 dom 节点的方法。
示例：
import reactdom from 'react-dom';function modal({ children }) { return reactdom.createportal( {children}, 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 something went wrong.
; } return this.props.children; }}
20。延迟加载
react 支持组件延迟加载，这意味着组件可以在需要时异步加载，从而提高大型应用程序的性能。
示例：
import react, { suspense } from 'react';const othercomponent = react.lazy(() => import('./othercomponent'));function mycomponent() { return ( <suspense fallback={loading...}> );}
21。严格模式
strictmode 是一个用于突出显示应用程序中潜在问题的工具。它不会呈现任何可见的 ui，但会检查是否存在已弃用的生命周期方法等问题。
示例：
function app() { return ( );}
22。受控组件与非受控组件
受控组件：表单元素，其值由 react 状态控制。
不受控制的组件：由 dom 处理值的表单元素。
example of controlled component:function controlledinput() { const [value, setvalue] = usestate(''); return ( setvalue(e.target.value)} /> );}example of uncontrolled component:function uncontrolledinput() { const inputref = useref(null); return ;}
23。支柱钻井
当数据通过多个级别的组件向下传递以到达深层嵌套的子组件时，就会发生 prop drilling。通过使用 context api 或状态管理库可以避免这种情况。
example of prop drilling:function grandparent() { const name = "john"; return ;}function parent({ name }) { return ;}function child({ name }) { return {name}
;}
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 hello!; }}
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 Check the console to see the timer.
;}
这些附加概念将帮助您加深对 react 的理解并应对更高级的场景！
以上就是React 基础知识第 2 部分的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1491574.html
微信扫一扫 
支付宝扫一扫 
