三方集成

下面这篇教程会简单介绍React如何和三方库集成.

在这个例子中我们将会学习到如何混合使用React和jQuery UI 这个插件.
我们选用了tag-it这个jQuery插件来举例. 这个插件将无序列表(unordered list)转化成input标签来管理.

<ul>
  <li>JavaScript</li>
  <li>CSS</li>
</ul>

为了让上面这段代码能够运行, 我们需要引入jQuery, jQuery UI 以及tag-it这个插件. 使用插件的代码如下.

$('<dom element selector>').tagit();

我们选择了一个DOM元素然后调用了tagit方法.

首先我们要做的事情是对Tags这个组件我们需要它只被React渲染一次(single-renderer).
这是因为当React渲染出我们想控制的DOM元素之后,我们想把该元素的控制权从React转交给jQuery.
如果我们跳过了这一步,那么React和jQuery会对相同的DOM元素进行控制, 并且不会知道彼此的存在. 为了实现这个一次渲染的机制, 我们需要用到React自带的生命周期方法shouldComponentUpdate.

当我们想以编程的方式在已有的tag-itDOM对象上添加新的标签时, 这一行为将被这个React组件触发, 并且需要配合上jQuery API一起才能工作. 我们需要找到一种方法, 既能让数据和Tags组件交互,又能保证组件只渲染一次. 为了更形象的描述我们的实现过程, 我们会在我们的APP组件里面添加一个input和一个button. 当button被点击时, 我们会将一个string传递到Tags组件中.

class App extends React.Component {
  constructor(props) {
    super(props);
    this._addNewTag = this._addNewTag.bind(this);
    this.state = {
      tags: ['JavaScript', 'CSS'],
      newTag: null
    };
  }
  _addNewTag() {
    this.setState({newTag: this.refs.field.value});
  }
  render() {
    return (
      <div>
        <p>Add new tag:</p>
        <div>
          <input type='text' ref='field'/>
          <button onClick={ this._addNewTag }>Add</button>
        </div>
        <Tags tags={ this.state.tags } newTag={ this.state.newTag }/>
      </div>
    );
  }
}

我们使用了组件内部的state来存储我们新加入的field. 当我们每一次点击button的时候, state都会被更新从而触发Tags组件的重新渲染.
然而, 因为在shouldComponentUpdate中我们返回了false, 所以组件事实上并不会被更新.
还有另外一点不同的是我们通过另一个生命周期方法componentWillReceiveProps取到了新标签的值, 同时调用tagit方法来增加我们的filed.

class Tags extends React.Component {
  componentDidMount() {
    this.list = $(this.refs.list);
    this.list.tagit();
  }
  shouldComponentUpdate() {
    return false;
  }
  componentWillReceiveProps(newProps) {
    this.list.tagit('createTag', newProps.newTag);
  }
  render() {
    return (
      <ul ref='list'>
        { this.props.tags.map((tag, i) => <li key={ i }>{ tag } </li>) }
      </ul>
    );
  }
}

参考资料:

• https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party