说一说你对react refs的理解

新，为异步原生JS控制的范围调用，如原生事件处理函数，定时器回调函数，Ajax回调函数，此时setState被调用后立即

更新DOM，为同步

所谓异步就是批量更新，减少ADOM渲染次数，在React能控制范围内，一定是批量更新(为了性能着想)，先合并状态，再一次性更新DOM

setState意味着一个完整的渲染流程，包括

shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate

setState 批量更新(异步) 就是为了避免频繁 re-render，消耗性能非常恼火

批量更新过程和事件循环类似，来一个setState就将其加入一个队列，待时机成熟，将队列中 state 结果合并，最后只会对最新的state 进行一个更新流程

在 react17 中，setState 批量执行，但如果在 setTimeout、事件监听器等函数里，setState 会同步执行。可以在外面包一层 batchUpdates 函数，手动设置 excutionContext 切换成批量执行

react18 中所有的 setState 都是异步批量执行

说一说你对react refs的理解

React 之 Refs 的使用

ref --> reference：引用

React中引用简写，是一个属性，助于存储对React元素或组件的引用，引用由组件渲染配置函数返回

ref使用有三种方式：字符串(不推荐使用)，对象，函数

1、字符串 React16 之前用的最多的，如

<p ref="info">text</p>

2、函数格式，ref对应一个方法，该方法有一个参数，即，对应的节点实例

<p ref={ele=>this.info=ele}>test</p>

3、createRef方法，React16 提供的API，使用React.createRef()实现

使用场景

input标签聚焦希望直接使用DOM元素中的某个方法，或者直接使用自定义组件中的某一个方法

ref作用于内置的HTML组件，得到的将是真实的DOM元素 ref作用于类组件，得到的将是类的实例

ref不能作用于函数组件，但是函数组件中可以传递ref

class MyComponent extends React.Component {

constructor(props)

{

super(props);

this.myRef = React.createRef();

}

render()

{

return< div ref = {

this.myRef }

/>;

}

}

1. 在函数组件使用 React.forwardRef() 来暴露函数组件的 DOM 元素

const Input = forwardRef((props, ref) => {

return (

< input {

...props }

ref = {

ref }

> )

} )

class MyComponent extends React.Component

this.ref = React.createRef(null);

}

clickHandle = () => {

// 操作Input组件聚焦

this.ref.current.focus();

}

render()

{

return (

< div >

< button onClick = {

this.clickHandle }

>

点击

</ button >

< Input ref = {

this.ref }

>

</ div > )

}

}

render不能访问refs

因为 render 阶段 DOM还未生成，无法获取 DOM，DOM的获取需要在 pre-commit 和 commit 阶段