深圳福田站,2345网址导航电脑版,用现成的php模板 怎么做网站,望野王绩朗诵第1题#xff1a;简述下 React 的生命周期#xff1f;每个生命周期都做了什么#xff1f; React 组件的生命周期可以分为三个阶段#xff1a;挂载阶段、更新阶段和卸载阶段。每个生命周期方法都有特定的目的和功能。 挂载阶段#xff1a; constructor#xff1a;组件的构…第1题简述下 React 的生命周期每个生命周期都做了什么 React 组件的生命周期可以分为三个阶段挂载阶段、更新阶段和卸载阶段。每个生命周期方法都有特定的目的和功能。 挂载阶段 constructor组件的构造函数在组件被创建时调用用于初始化状态和绑定方法。static getDerivedStateFromProps在组件实例化和每次接收新的 props 时被调用用于根据新的 props 更新状态。render根据组件的状态和属性返回 JSX 元素。componentDidMount在组件被挂载到 DOM 后立即调用可以进行异步数据获取、订阅事件等操作。 更新阶段 static getDerivedStateFromProps在接收到新的 props 或 state 时被调用用于根据新的 props 或 state 更新状态。shouldComponentUpdate在组件更新前被调用用于控制组件是否需要重新渲染默认返回 true。render根据组件的状态和属性返回 JSX 元素。getSnapshotBeforeUpdate在 render 方法之后、更新 DOM 之前被调用用于获取更新前的 DOM 快照。componentDidUpdate在组件更新后被调用可以进行 DOM 操作或发送网络请求等操作。 卸载阶段 componentWillUnmount在组件被卸载前调用可以进行清理操作如取消订阅、清除定时器等。
除了上述生命周期方法还有一些其他的生命周期方法如错误边界相关的 componentDidCatch 方法用于捕获子组件中的错误。
需要注意的是由于 React Hooks 的引入部分生命周期方法已经不再推荐使用。可以使用 useEffect Hook 来代替 componentDidMount、componentDidUpdate 和 componentWillUnmount。
具体介绍
render()
render() 方法是 class 组件中唯一必须实现的方法。当 render 被调用时它会检查 this.props 和 this.state 的变化并返回以下类型之一
React 元素。 通常通过 JSX 创建。例如div / 会被 React 渲染为 DOM 节点MyComponent /会被 React 渲染为自定义组件无论是 div / 还是 MyComponent / 均为 React 元素。数组或 fragments。 使得 render 方法可以返回多个元素。欲了解更多详细信息请参阅 fragments 文档。Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息请参阅有关 portals 的文档字符串或数值类型。它们在 DOM 中会被渲染为文本节点布尔类型或 null。什么都不渲染。主要用于支持返回 test 的模式其中 test 为布尔类型。 render() 函数应该为纯函数这意味着在不修改组件 state 的情况下每次调用时都返回相同的结果并且它不会直接与浏览器交互。
如需与浏览器进行交互请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数可以使组件更容易思考。
constructor()
如果不初始化 state 或不进行方法绑定则不需要为 React 组件实现构造函数。
在 React 组件挂载之前会调用它的构造函数。在为 React.Component 子类实现构造函数时应在其他语句之前前调用 super(props)。否则this.props 在构造函数中可能会出现未定义的 bug。 通常在 React 中构造函数仅用于以下两种情况 通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例在 constructor() 函数中不要调用 setState() 方法。如果你的组件需要使用内部 state请直接在构造函数中为 this.state 赋值初始 state。
只能在构造函数中直接为 this.state 赋值。如需在其他方法中赋值你应使用 this.setState() 替代。
要避免在构造函数中引入任何副作用或订阅。如遇到此场景请将对应的操作放置在 componentDidMount 中。
componentDidMount()
componentDidMount() 会在组件挂载后插入 DOM 树中立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据此处是实例化请求的好地方。
这个方法是比较适合添加订阅的地方。如果添加了订阅请不要忘记在 componentWillUnmount() 里取消订阅
你可以在 componentDidMount() 里直接调用 setState()。它将触发额外渲染但此渲染会发生在浏览器更新屏幕之前。如此保证了即使在 render() 两次调用的情况下用户也不会看到中间状态。请谨慎使用该模式因为它会导致性能问题。通常你应该在 constructor() 中初始化 state。如果你的渲染依赖于 DOM 节点的大小或位置比如实现 modals 和 tooltips 等情况下你可以使用此方式处理。
componentDidUpdate()
componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。
当组件更新后可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较也可以选择在此处进行网络请求。例如当 props 未发生变化时则不会执行网络请求。
componentDidUpdate(prevProps) {// 典型用法不要忘记比较 propsif (this.props.userID ! prevProps.userID) {this.fetchData(this.props.userID);}
}你也可以在 componentDidUpdate() 中直接调用 setState()但请注意它必须被包裹在一个条件语句里正如上述的例子那样进行处理否则会导致死循环。它还会导致额外的重新渲染虽然用户不可见但会影响组件性能。不要将 props “镜像”给 state请考虑直接使用 props。 欲了解更多有关内容请参阅为什么 props 复制给 state 会产生 bug。
如果组件实现了 getSnapshotBeforeUpdate() 生命周期不常用则它的返回值将作为 componentDidUpdate() 的第三个参数 “snapshot” 参数传递。否则此参数将为 undefined。
componentWillUnmount()
componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作例如清除 timer取消网络请求或清除在 componentDidMount() 中创建的订阅等。
componentWillUnmount() 中不应调用 setState()因为该组件将永远不会重新渲染。组件实例卸载后将永远不会再挂载它。
shouldComponentUpdate()
根据 shouldComponentUpdate() 的返回值判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下你应该遵循默认行为。
当 props 或 state 发生变化时shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。
此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较并减少了跳过必要更新的可能性。
如果你一定要手动编写此函数可以将 this.props 与 nextProps 以及 this.state 与nextState 进行比较并返回 false 以告知 React 可以跳过更新。请注意返回 false 并不会阻止子组件在 state 更改时重新渲染。
我们不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率且会损害性能。
目前如果 shouldComponentUpdate() 返回 false则不会调用 UNSAFE_componentWillUpdate()render() 和 componentDidUpdate()。后续版本React 可能会将 shouldComponentUpdate 视为提示而不是严格的指令并且当返回 false 时仍可能导致组件重新渲染。
static getDerivedStateFromProps()
getDerivedStateFromProps 会在调用 render 方法之前调用并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state如果返回 null 则不更新任何内容。
此方法适用于罕见的用例即 state 的值在任何时候都取决于 props。例如实现 组件可能很方便该组件会比较当前组件与下一组件以决定针对哪些组件进行转场动画。
派生状态会导致代码冗余并使组件难以维护。 确保你已熟悉这些简单的替代方案
如果你需要执行副作用例如数据提取或动画以响应 props 中的更改请改用 componentDidUpdate。 如果只想在 prop 更改时重新计算某些数据请使用 memoization helper 代替。 如果你想在 prop 更改时“重置”某些 state请考虑使组件完全受控或使用 key 使组件完全不受控代替。 此方法无权访问组件实例。如果你需要可以通过提取组件 props 的纯函数及 class 之外的状态在getDerivedStateFromProps()和其他 class 方法之间重用代码。
请注意不管原因是什么都会在每次渲染前触发此方法。这与 UNSAFE_componentWillReceiveProps 形成对比后者仅在父组件重新渲染时触发而不是在内部调用 setState 时。
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate() 在最近一次渲染输出提交到 DOM 节点之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息例如滚动位置。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。
此用法并不常见但它可能出现在 UI 处理中如需要以特殊方式处理滚动位置的聊天线程等。
应返回 snapshot 的值或 null。
Error boundaries
Error boundaries 是 React 组件它会在其子组件树中的任何位置捕获 JavaScript 错误并记录这些错误展示降级 UI 而不是崩溃的组件树。Error boundaries 组件会捕获在渲染期间在生命周期方法以及其整个树的构造函数中发生的错误。
如果 class 组件定义了生命周期方法 static getDerivedStateFromError() 或 componentDidCatch() 中的任何一个或两者它就成为了 Error boundaries。通过生命周期更新 state 可让组件捕获树中未处理的 JavaScript 错误并展示降级 UI。
仅使用 Error boundaries 组件来从意外异常中恢复的情况不要将它们用于流程控制。
static getDerivedStateFromError()
此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数并返回一个值以更新 state。
componentDidCatch()
此生命周期在后代组件抛出错误后被调用。 它接收两个参数
error —— 抛出的错误。 info —— 带有 componentStack key 的对象其中包含有关组件引发错误的栈信息。 componentDidCatch() 会在“提交”阶段被调用因此允许执行副作用。 它应该用于记录错误之类的情况。
React 的开发和生产构建版本在 componentDidCatch() 的方式上有轻微差别。
在开发模式下错误会冒泡至 window这意味着任何 window.onerror 或 window.addEventListener(‘error’, callback) 会中断这些已经被 componentDidCatch() 捕获的错误。
相反在生产模式下错误不会冒泡这意味着任何根错误处理器只会接受那些没有显式地被 componentDidCatch() 捕获的错误。
第2题React 错误边界是什么
React 错误边界Error Boundaries是 React 组件中的一种特殊组件用于捕获并处理子组件在渲染过程中抛出的 JavaScript 错误以防止整个应用程序崩溃。
当一个错误边界组件包裹在子组件中时它会监视子组件的渲染过程。如果子组件在渲染期间抛出了 JavaScript 错误包括在生命周期方法、构造函数或渲染方法中的错误错误边界组件会捕获该错误并显示备用的 UI而不是导致整个应用程序崩溃。
错误边界组件是通过定义特定的生命周期方法 componentDidCatch(error, info) 来实现的。当子组件抛出错误时React 会调用错误边界组件的 componentDidCatch 方法并将错误信息和错误堆栈作为参数传递给该方法。在 componentDidCatch 方法中你可以选择如何处理错误例如显示错误信息或记录错误。
要创建一个错误边界组件你可以定义一个继承自 React.Component 的类并实现 componentDidCatch 方法。下面是一个简单的错误边界组件的示例
class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state { hasError: false };}componentDidCatch(error, info) {this.setState({ hasError: true });// 在这里可以处理错误例如显示错误信息或记录错误console.error(error);}render() {if (this.state.hasError) {// 显示备用的 UIreturn divOops, something went wrong./div;}return this.props.children;}
}在你的应用程序中你可以将错误边界组件包裹在其他组件中以捕获并处理错误。例如
ErrorBoundaryMyComponent /
/ErrorBoundary在这个示例中如果 MyComponent 抛出了错误错误边界组件 ErrorBoundary 将会捕获错误并显示备用的 UI。
需要注意的是错误边界组件只能捕获其子组件的错误而不能捕获其自身的错误或其他同级组件的错误。
第3题为什么不能直接使用 this.state 改变数据
在 React 中不能直接使用 this.state 来改变组件的状态数据而是应该使用 setState 方法。
主要原因是为了保证 React 组件的可预测性和性能优化。直接修改 this.state 的值会绕过 React 的状态更新机制导致 React 无法感知到状态的变化从而无法触发组件的重新渲染。这样可能会导致组件的 UI 不会正确地更新且可能引发其他潜在的问题。
相反React 提供了 setState 方法来更新组件的状态。setState 方法接收一个对象或一个函数作为参数用于更新组件的状态。React 会将新的状态合并到当前状态中并触发组件的重新渲染。通过 setState 方法更新状态React 能够正确地跟踪状态的变化并在必要时重新渲染组件。
此外setState 方法是异步的React 会对多次连续的状态更新进行批处理以提高性能。如果需要在状态更新后执行某些操作可以将回调函数作为 setState 方法的第二个参数或者使用 componentDidUpdate 生命周期方法。
总结起来使用 setState 方法来更新状态可以确保 React 正确地跟踪状态的变化并触发组件的重新渲染以保证组件的可预测性和性能优化。
第4题React 中如果绑定事件使用匿名函数有什么影响
在 React 中如果使用匿名函数来绑定事件会有一些影响。每当组件重新渲染时匿名函数会被重新创建这意味着每次渲染时都会生成一个新的函数实例。这可能会导致性能问题特别是在具有大量子组件的情况下。
由于每个函数实例都被认为是一个新的引用React 在进行虚拟 DOM 比较时会认为事件处理程序已经发生了变化。这将导致 React 重新渲染组件和子组件即使实际上事件处理程序的功能没有发生任何变化。
为了避免这个问题最好使用具名函数来定义事件处理程序并将其作为属性传递给组件。这样在组件重新渲染时React 将会识别到事件处理程序是同一个引用并且不会触发不必要的重新渲染。
class Demo {render() {return button onClick{(e) {alert(我点击了按钮)}}按钮/button}
}
这样的写法因为使用的是匿名函数所以组件每次都会认为是一个新的 props不会使用缓存优化在性能上会有一定的损耗。
第5题React 的事件代理机制是什么
React 的事件代理机制是指在顶层使用单一的事件监听器来处理所有的事件并通过事件冒泡机制将事件传递给正确的组件进行处理。这种机制可以提高性能并减少内存占用。
在 React 中你可以通过将事件处理程序绑定到组件的属性上来使用事件代理。例如你可以将一个名为 onClick 的事件处理程序绑定到一个按钮组件上
button onClick{handleClick}Click me/button在上面的示例中handleClick 是一个具名函数它将作为 onClick 属性传递给按钮组件。当按钮被点击时React 将会在顶层监听到该事件并将事件传递给 handleClick 函数进行处理。
在事件处理程序中你可以访问事件对象使用 event 参数来获取相关信息例如
function handleClick(event) {console.log(Button clicked!);console.log(Event:, event);
}通过事件对象你可以获取事件的类型、目标元素等信息并执行相应的操作。
需要注意的是React 使用合成事件来包装原生事件并提供了一些额外的功能如跨浏览器兼容性和性能优化。因此你可以放心地使用 React 的事件代理机制来处理事件而无需直接操作原生事件。 当使用 React 进行事件处理时React 会利用事件代理机制来处理事件。事件代理是指将事件绑定到父元素上然后通过冒泡机制将事件传递给子元素。这样做的好处是可以减少事件处理函数的数量提高性能。
class ParentComponent extends React.Component {handleClick (event) {console.log(点击了子元素, event.target);}render() {return (div onClick{this.handleClick}ChildComponent //div);}
}class ChildComponent extends React.Component {render() {return button点击我/button;}
}在上面的例子中ParentComponent 是父组件ChildComponent 是子组件。当点击子组件中的按钮时实际上是触发了父组件中的点击事件处理函数 handleClick。通过事件代理我们可以在父组件中处理子组件的事件这样可以更方便地管理和控制事件。
在 handleClick 函数中我们可以通过 event.target 来获取触发事件的具体元素这里就是子组件中的按钮。
需要注意的是事件代理只对合成事件有效而不适用于原生事件。因此如果你需要在 React 中使用原生事件需要使用 addEventListener 方法来手动绑定事件。
