首页 > 编程知识 正文

react中级面试题,react高级面试题

时间:2023-05-03 17:24:50 阅读:26822 作者:4855

react的生命周期分为装载时(4个,更新时) 5个,卸载时(1个,错误处理阶段) 2个4个阶段。 总共有12个钩子。 1 .装载阶段(四个挂钩: constructor ) () ) ) )。

加载时调用一次,可以初始化state并绑定事件处理程序函数的实例。

构造器(props ) super ) props; //其中this.setState () this.state={ counter: 0 }; 初始化状态。 this.handle click=this.handle click.bind (this; } staticgetderivedstatefromprops (props,state ) ) )。

每次更新组件时都会调用组件,组件在props更改时更新state。 每次收到新的props时,对象都会作为新的state返回,如果返回null,则不更新任何内容。

render () )

类组件需要实现的唯一方法是创建虚拟dom树并更新dom树。

componentDidMount (

该组件装载后调用,并且只调用一次。 一般在这里要求数据。

2 .更新阶段(5个挂钩):staticgetderivedstatefromprops (props,state ) () () () () ) ) ) ) ) )。

在调用render方法之前调用,在初始装载和后续更新时调用。 必须返回更新state的对象。 如果返回null,则不更新任何内容。

staticgetderivedstatefromprops (next props,prevState ) { const {type}=nextProps; //输入的type变化时,更新Stateif(Type )!==prevState.type ) { return { type,}; //否则不对state执行任何操作的返回空值; } shouldcomponentupdate ((下一步,下一个状态) ) ) ) ) ) ) ) ) )。

如果props或state发生更改,则在渲染之前调用时,返回真将更新dom,返回假将阻止更新。 它只作为优化性能的方法存在。

render () )

render ()函数必须是纯函数。 这意味着每次在不更改组件状态的情况下调用时都会返回相同的结果,而不会直接与浏览器交互。 您可以将render () )保留为纯函数,以帮助您更好地考虑组件。

getsnapshotbeforeupdate (prev props,prevState )。

在将最后一次渲染提交到DOM节点之前调用,并作为componentDidUpdate的第三个参数返回值。 这样,组件就可以在发生更改之前从DOM获取信息(例如滚动位置)。

componentdidupdate(prevprops,prevState,snapshot ) )。

更新后立即调用,在初次渲染中不执行。 组件更新后,可以在此处操作DOM并发出网络请求。

3 .卸载阶段(一个挂钩) (组件willunmount ) ) )。

在卸载和销毁组件之前直接调用,并使用这种方法执行所需的清理操作,如清除时间、取消网络请求等。

4 .错误处理阶段(两个挂钩) staticgetderivedstatefromerror (error ) ) ) )。

在渲染阶段,将抛出的错误作为参数调用,并返回更新状态的值。 不允许有副作用。

组件索引(错误,信息) )。

在提交阶段调用,记录错误并允许执行副作用。

副作用:(一个函数在运行中发生了可以从外部观察到的变化。 例如,全局变量的修正、参数的修正、console.log ) )等外部可以观察其变化。 )

注意:还有三个生命周期方法已经过时,在react17版本后会被淘汰,但现在仍然有效,分别是:UNSAFE_componentWillMount()、UNSAFE_componentWillReceiveProps(nextProps)、UNSAFE_componentWillUpdate(nextProps, nextState)

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。