react ref和组件API

最新推荐文章于 2024-08-03 16:44:35 发布

地中海真帅

最新推荐文章于 2024-08-03 16:44:35 发布

阅读量316

点赞数

分类专栏：前端开发文章标签： react 前端

本文链接：https://blog.csdn.net/s_y_f_/article/details/119220059

版权

本文详细介绍了React中的state和setState的工作原理，包括异步更新和浅合并特性。接着讲解了ref的概念，以及如何通过字符串、回调和createRef创建ref。此外，还讨论了Keys的重要性，强调了正确使用key以优化性能。最后，探讨了React组件的API，如replaceState、setProps、replaceProps、forceUpdate和findDOMNode等，以及它们在组件生命周期中的作用。通过学习，加深对React组件通信和管理的理解。

摘要由CSDN通过智能技术生成

介绍:

昨天学习到了生命周期,今天我们接着昨天的知识点继续学习,今天学习一下state ,setState以及ref和组件API,大家感兴趣的话可以跟随文章进行学习呦

state和setState

state 组件自身状态

setState(updater[,callback])

第一个参数:updater 更新数据的方法/对象

第二个参数:callback 更新成功后的回调函数

异步: react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能
浅合并: Object.assign()
React 在调用 setstate 后，react 会将传入的参数对象和组件当前的状态合并，触发调和过程，在调和过程中，react 会根据新的状态构建 react 元素树重新渲染整个 UI 界面，在得到元素树之后，react 会自动计算新老节点的差异，根据差异对界面进行最小化重新渲染

ref是什么

ref是React提供的用来操纵React组件实例或者DOM元素的接口。

ref分为三种定义方式

1.字符串形式的ref

在这里插入图片描述

2.回调形式的ref

在这里插入图片描述

3.createRef创建ref容器·

在这里插入图片描述

代码效果图:

class MyComponent extends React.Component {
   
  handleClick() {
   
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  }
  render() {
   
    //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={
   this.handleClick.bind(this)}
        />
      </div>
    );
  }
}
 
ReactDOM.render(
  <</