React 笔记

ref

1. 作用

通常是为了引用真实的dom节点（对该节点进行相应操作），或者某个组件实例（只有类组件有，函数组件不能被实例化）。

2. 使用（三种方式）

2.1 字符串设置

即将被废弃，除了很紧急的开发，不推荐使用。

<div ref="div"></div>

2.2 回调函数

自己定义一个变量，然后绑定一个回调函数赋值。
注意如果是内联函数，每次render后，该函数会被执行2次，第一次传入的参数是null。（在类自身上的回调并不会）
开发常用。

<div ref={(c)=>{this.div = c;console.log(c);}}></div>

2.3 React 提供的方式

类组件：React.createRef()
函数组件：useRef()
好处是不用自己写回调，将获取 ref 的过程交给 React 执行。并且 React 会在组件销毁后自动解除去真实 dom 的引用，避免内存堆积。

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  render() {
    return <input type="text" ref={this.inputRef} />;
  }
}

事件

1. 通过 React 自身的 onXxx 属性指定事件处理函数(注意大小写)

React 主要使用了事件代理，主要有两方面的优点：

• React使用的是自定义(合成)事件, 而不是使用的原生DOM事件，实现了多个浏览器的兼容性
• React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)，高效

2. 通过 ref

通过 ref 获取原生 dom 后，和原生 js 操作一样，不推荐。