React 组件 API 使用技巧

香菊网 发表于: 2019-05-31 分类: js部分  前端front  H5部分  

本文中将讨论 React 组件 API。讲解以下7个方法:

设置状态:setState

setState(object nextState[, function callback])

说明:合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

注意:setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。

替换状态:replaceState

replaceState(object nextState[, function callback])

说明:replaceState()方法与setState()类似,但是方法只会保留nextState中状态,

注意:原state不在nextState中的状态都会被删除。

设置属性:setProps

setProps(object nextProps[, function callback])

说明:设置组件属性,并重新渲染组件。我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()

注意:我可以在节点上再次调用React.render(),也可以通过setProps()方法改变组件属性,触发组件重新渲染。

替换属性:replaceProps

replaceProps(object nextProps[, function callback])

注意:replaceProps()方法与setProps类似,但它会删除原有 props。

获取DOM节点:findDOMNode

DOMElement findDOMNode()

说明:如果组件已经挂载到DOM中,该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时,this.findDOMNode()也会返回null。从DOM 中读取值的时候,该方法很有用,如:获取表单字段的值和做一些 DOM 操作。

判断组件挂载状态:isMounted

bool isMounted()

说明:isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()forceUpdate()在异步场景下的调用不会出错。

 

标签: js部分前端frontH5部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮