主页 分类 关于

React 组件 API

  1. React 组件
  2. 替换状态: replaceState
  3. 设置属性: setProps
  4. 替换属性: replaceProps
  5. 强制更新: forceUpdate
  6. 获取DOM节点: findDOMNode
  7. 判断组件挂载状态: isMounted

React笔记

React 组件

  • 设置状态: setState

  • 替换状态: replaceState

  • 设置属性: setProps

  • 替换属性: replaceProps

  • 强制更新: forceUpdate

  • 获取DOM节点: findDOMNode

  • 判断组件挂载状态: isMounted

{/*  nextState将要设置的新状态, 该状态会和当前的state合并  */} 
setState(object nextState[, function callback])

{/*  callback可选参数, 回调函数 该函数会在setState设置成功, 且组件重新渲染后调用  */} 
setState(object callback[, function callback])

关于setState

  • 不能在组件内部通过this.state修改状态, 因为该状态会在调用setState()后被替换

  • setState()并不会立即改变this.state, 而是创建一个即将处理的state setState()并不一定是同步的, 为了提升性能React会批量执行state和DOM渲染

  • setState()总是会触发一次组件重绘, 除非在shouldComponentUpdate()中实现了一些条件渲染逻辑

<body>
    <div id="example"></div>
    <script type="text/babel">
    class MyNameIsStitch extends React.Component{
      constructor(props) {
          super(props);
          this.state = {clickCount: 0};
          this.handleClick = this.handleClick.bind(this);
      }
      
      handleClick() {
        this.setState(function(state) {
          return {clickCount: state.clickCount + 1};
        });
      }
      render () {
        return (<h2 onClick={this.handleClick}>点击 点击次数为: {this.state.clickCount}</h2>);
      }
    }
    ReactDOM.render(
      <MyNameIsStitch />,
      document.getElementById('example')
    );
    </script>
</body>

查看效果

替换状态: replaceState

  • replaceState()方法与setState()类似, 但是方法只会保留nextState中状态, 原state不在nextState中的状态都会被删除 
    {/*  nextState, 将要设置的新状态, 该状态会替换当前的state  */} 
    setProps(object nextProps[, function callback]

    {/*  callback, 可选参数, 回调函数 该函数会在replaceState设置成功, 且组件重新渲染后调用  */} 
    setProps(object callback[, function callback]

设置属性: setProps

  • 设置组件属性, 并重新渲染组件
  • props相当于组件的数据流, 它总是会从父组件向下传递至所有的子组件中 当和一个外部的JavaScript应用集成时, 我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染, 可以使用setProps()
  • 更新组件, 我可以在节点上再次调用React.render(), 也可以通过setProps()方法改变组件属性, 触发组件重新渲染 
{/*  nextProps, 将要设置的新属性, 该状态会和当前的props合并  */} 
replaceProps(object nextProps[, function callback])

{/*  callback, 可选参数, 回调函数 该函数会在setrops设置成功, 且组件重新渲染后调用  */} 
replaceProps(object allback[, function callback])

替换属性: replaceProps

  • replaceProps()方法与setProps类似, 但它会删除原有 props
{/*  nextProps, 将要设置的新属性, 该属性会替换当前的props  */} 
replaceProps(object nextProps[, function callback])

{/*  callback, 可选参数, 回调函数 该函数会在replaceProps设置成功, 且组件重新渲染后调用  */} 
replaceProps(object allback[, function callback])

强制更新: forceUpdate

  • forceUpdate()方法会使组件调用自身的render()方法重新渲染组件, 组件的子组件也会调用自己的render() 但是, 组件重新渲染时, 依然会读取this.props和this.state, 如果状态没有改变, 那么React只会更新DOM
  • forceUpdate()方法适用于this.props和this.state之外的组件重绘 (如: 修改了this.state后) , 通过该方法通知React需要调用render()
  • 一般来说, 应该尽量避免使用forceUpdate(), 而仅从this.props和this.state中读取状态并由React触发render()调用
{/*  callback, 可选参数, 回调函数 该函数会在组件render()方法调用后调用  */} 
forceUpdate([function callback])

获取DOM节点: findDOMNode

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

判断组件挂载状态: isMounted

  • isMounted()方法用于判断组件是否已挂载到DOM中 可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错
{/*  返回值: true或false, 表示组件是否已挂载到DOM中  */} 
bool isMounted()









作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-API.html博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议