React组件API

悠悠 2022-06-16 13:09 175阅读 0赞

## 虚拟DOM ##

React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中。  
此外，React实现了一套完整的事件合成机制，能够保持事件冒泡的一致性，跨浏览器执行。甚至可以在IE8中使用HTML5的事件。  
大部分情况下，我们都是在构建React的组件，也就是操作虚拟DOM。但是有时候我们需要访问底层的API，可能或通过使用第三方的插件来实现我们的功能，如jQuery。React也提供了接口让我们操作底层API。

## 1、setState ##

> setState(object nextState\[,function callback\])

合并nextState 和当前 state。这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。另外，也支持可选的回调函数，该函数在 setState 执行完毕并且组件重新渲染完成之后调用。

**注意：**

绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。

setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。  
不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。

setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state存在差异的时候调用 setState() 可以避免不必要的重新渲染。

## 2、replaceState ##

> replaceState(object nextState\[,function callback\])

类似于 setState()，但是删除之前所有已存在的 state键，这些键都不在 nextState 中。

## 3、forceUpdate() ##

> forceUpdate(\[function callback\])

如果 render() 方法从 this.props 或者 this.state 之外的地方读取数据，你需要通过调用 forceUpdate() 告诉 React什么时候需要再次运行 render()。如果直接改变了this.state，也需要调用 forceUpdate()。

调用 forceUpdate() 将会导致 render() 方法在相应的组件上被调用，并且子级组件也会调用自己的 render()，但是如果标记改变了，那么 React仅会更新 DOM。

通常情况下，应该尽量避免所有使用 forceUpdate() 的情况，在 render() 中仅从this.props 和 this.state 中读取数据。这会使应用大大简化，并且更加高效。

## 4、getDOMNode ##

> DOMElement getDOMNode()

如果组件已经挂载到了DOM 上，该方法返回相应的本地浏览器 DOM 元素。从 DOM 中读取值的时候，该方法很有用，比如获取表单字段的值和做一些 DOM 操作。当 render 返回null 或者 false 的时候，this.getDOMNode() 返回 null。

## 5、isMounted() ##

> boolean isMounted()

如果组件渲染到了DOM 中，isMounted() 返回true。可以使用该方法保证 setState() 和forceUpdate() 在异步场景下的调用不会出错。

## 6、setProps ##

> setProps(object nextProps\[,function callback\])

当和一个外部的JavaScript 应用集成的时候，你可能想给一个用 React.render() 渲染的组件打上改变的标记。

尽管在同一个节点上再次调用 React.render() 来更新根组件是首选的方式，也可以调用setProps() 来改变组件的属性，触发一次重新渲染。另外，可以传递一个可选的回调函数，该函数将会在 setProps 完成并且组件重新渲染完成之后调用。

注意：

When possible,the declarative approach of calling React.render() againis preferred; it tends to make updates easier to reason about. (There’s nosignificant performance difference between the two approaches.)

刚方法仅在根组件上面调用。也就是说，仅在直接传给 React.render() 的组件上可用，在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps()，不要利用响应式更新，而是当子组件在 render() 中创建的时候传入新的prop 到子组件中。

## 7、replaceProps ##

> replaceProps(object nextProps\[,function callback\])

类似于 setProps()，但是删除所有已存在的props，而不是合并新旧两个 props 对象。