react ref和组件API

介绍:

昨天学习到了生命周期,今天我们接着昨天的知识点继续学习,今天学习一下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(
  <MyComponent