React入门--------组件API

Posted 2020-08-24 尹丹

setState

参数：nextState(object),[callback(function)]

设置nextState的某个键值。通常如果希望在某个事件或某个回调中来重新渲染组件，setState是一个最常用的触发方法，因为我们把UI内容跟state状态直接绑定在一起，一旦state发生改变并触动了绑定的逻辑，那么ui内容自然也会跟着变动：

 var Component1 = React.createClass({
        getInitialState: function() {
            return {
                isClick: !1
            }
        },
        componentDidUpdate: function(){
            console.log(\'componentDidUpdate\')
        },
        clickCb: function() {
            this.setState({
                isClick : !0
            }, function(){
                console.log(this.state.isClick)
            })
        },
        render: function() {
            return (<div onClick={this.clickCb}>
            isClick:{this.state.isClick ? \'yes\' : \'nope\'}
            </div>)
        }
    });
    var div = document.getElementById(\'a\');
    ReactDOM.render(
        <Component1 />, div
    );

如上通过state.isClick来决定div内要显示的内容，而我们点击div时会改变state.isClick的状态，从而触发绑定条件更改了div中的内容。

运行结果如下：

注意：该方法的回调是在重新渲染之后执行的。

replaceState

参数：nextState(object),[callback(function)]

整体更换掉state，回调方法在重新渲染之后执行。

forceUpdate

参数：[callback(function)]

在任何调用的时候强制渲染组件，即使使用shouldComponentUpdata返回了false

注意：该方法的回调也是在重新渲染之后执行的。

getDOMNode

返回组件/ReactElment挂载到页面上所对应的DOM元素

 var Component1 = React.createClass({
        getInitialState: function() {
            return {
                isClick: !1
            }
        },
        clickCb: function() {
            this.setState({
                isClick : !0
            }, function(){
                console.log(this.state.isClick)
            })
        },
        render: function() {
            return (<div onClick={this.clickCb}>
            isClick:{this.state.isClick ? \'yes\' : \'nope\'}
            </div>)
        }
    });
    var div = document.getElementById(\'a\');
    var c = ReactDOM.render(
        <Component1 />, div
    );
    console.log(c.getDOMNode())

isMounted

返回一个布尔值，如果组件挂载到了dom中，isMounted()返回true

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: \'\',
      lastGistUrl: \'\'
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      if (this.isMounted()) {
        this.setState({
          username: lastGist.owner.login,
          lastGistUrl: lastGist.html_url
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.username}\'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
);

setProps

参数：nextProps(object),[callback(function)]

和setState类似，不过修改的是props。

replaceProps

参数：nextProps(object),[callback(function)]

和replaceState类似，不过修改的是props。

refs

这个方法不属于组件，但也是在组件中常用的一个小技巧

在前面中提到，可以使用ReactClass.getDOMNode()的方法来获取到组件渲染在页面上的DOM节点，但是如果希望获取到的，是组件中的某个DOM元素呢

 var Component1 = React.createClass({
        clickCb: function(e) {
            if(e.target === this.refs.li2.getDOMNode()){
                alert(\'你点到第二个LI了\')
            }
        },
        render: function() {
            return (<ul onClick={this.clickCb}>
                <li>1</li>
                <li ref="li2">2</li>
                <li>3</li>
            </ul>)
        }
    });
    var div = document.getElementById(\'a\');
    ReactDOM.render(
            <Component1 />, div
    );

组件中的第二个li绑定了一个ref属性，值为li2，这意味着可以在组件中以this.refs.li2的形式来获取到改ReactElement。然后绑定点击事件，在点击的时候判断被点击的li元素是否等于this.refs.lis.getDOMNode9()。

下面再看一个例子：

 var App = React.createClass({
    getInitialState: function() {
      return {userInput: \'\'};
    },
    handleChange: function(e) {
      this.setState({userInput: e.target.value});
    },
    clearAndFocusInput: function() {
      // Clear the input
      this.setState({userInput: \'\'}, function() {
        // 组件重绘后会立即执行这句代码：
        this.refs.theInput.getDOMNode().focus();   // input成功聚焦（focus）
      });
    },
    render: function() {
      return (
        <div>
          <div onClick={this.clearAndFocusInput}>
            Click to Focus and Reset
          </div>
          <input
            ref="theInput" //我们可以在组件里以 this.refs.theInput 获取到它
            value={this.state.userInput}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  });