1.13 React 与其他库的集成

优质

小牛编辑

130浏览

2023-12-01

React可以在任何web应用中使用。React可以嵌入其他的应用中，也可以将其他的应用嵌入React中，不过需要多加小心。本篇教程将介绍部分常见的使用场景，主要包括集成jQuery和Backbone,但是同样的思想可以用来集成组件到其他任何现有的代码。

与DOM操作插件的集成

React 无法感知到React之外的DOM变化。这决定了更新只能基于React内部的表示，如果相同的DOM节点被其他库所操作，React会对此产生疑惑并无法恢复。

这并不意味着很难或者无法将React于其他影响DOM的方式相结合，你需要更加注意两者各自的行为。

避免冲突最简单的方式就是阻止React的更新。你可以通过渲染React无法更新的元素来实现，例如空的<div />。

如何处理这个问题

为了展示这个问题，我们来为通用的jQuery插件绘制一个包装器(wrapper)。

我们给根DOM元素添加ref。在componentDidMount中，我们将获得引用(reference)，因此将其传递给jQuery插件。

为了防止React在mount之后处理DOM元素，我们将在render方法中返回空的<div />。元素没有属性或者子元素，因此React不会更新它，使得jQuery插件可以自由地管理这部分的DOM节点。

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.somePlugin();
  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');
  }

  render() {
    return <div ref={el => this.el = el} />;
  }
}

注意，我们定义了componentDidMount和componentWillUnmount生命周期函数。很多jQuery插件为DOM元素添加了监听器(listener),因此在componentWillUnmount中退订监听器是非常重要的。如果插件本身不提供清除(cleanup)的方法，你可能需要自己提供，牢记一定要移除注册在插件中的事件监听者(event listener)以防止内存泄露。

与jQuery的Chosen插件集成

为了更具体地描述这个概念，让我们写一个最小化的Chosen插件的包装器(wrapper)，其中插件Chosen接受<select>元素的输入。

注意:
仅仅不能因为有实现的可能性，就意味着这对React应用来讲是最佳实践。我们鼓励在可能的情况下使用React组件。React组件很容易在React应用中重用(reuse)并且能更好控制其行为与外观。

首先，我们来看看Chosen对DOM的行为。

如果你在<select>DOM节点上调用Chosen，其会读取原始DOM节点的属性，以内联样式方式隐藏，并在内部的虚拟表达中添加单独的DOM节点。随后触发jQuery事件通知事件改变。

让我们了解一下我们所设计的React组件包装器(wrapper)<Chosen>的API:

function Example() {
  return (
    <Chosen onChange={value => console.log(value)}>
      <option>vanilla</option>
      <option>chocolate</option>
      <option>strawberry</option>
    </Chosen>
  );
}

为了简单起见，我们将其实现为一个不受控组件。

首先我们先创建一个空的组件，其中包含render()方法，其返回一个由<div>包裹的<select>:

class Chosen extends React.Component {
  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

需要注意为什么我们为<select>包裹一个额外的<div>。这是必须的，因为Chosen插件会为我们传入<select>节点后添加另一个DOM节点。。然而，就React而言，<div>总是只有一个子节点。这就是我们如何来确保React更新不会与Chosen插件所添加的额外DOM节点相冲突。值得注意的是，如果在React流之外修改了DOM节点，必须确保React无论如何都不会再接触DOM节点。

接下来，我们实现生命周周期函数。我们在componentDidMount中对引用的<select>节点初始化Chosen插件，并在componentWillUnmount中清除:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();
}

componentWillUnmount() {
  this.$el.chosen('destroy');
}

在CodePen中尝试

注意,React对this.el变量并没有特殊的含义，生效的原因仅仅是我们先前在render()方法中ref对其进行了赋值:

<select className="Chosen-select" ref={el => this.el = el}>

上述对于组件的渲染已经足够，但是我们也想要获得值改变的通知(notifies about the value changes),为了实现这个目的，我们在<select>节点上订阅(subscribe)jQuery Chosen插件的change事件。

我们不直接给Chosen传递this.props.onChange，因为包括事件处理程序在内的组件的属性可能会发生改变。相反，我们声明handleChange方法，它会调用this.props.onChange方法，并订阅jQuery的change事件:

componentDidMount() {
  this.$el = $(this.el);
  this.$el.chosen();

  this.handleChange = this.handleChange.bind(this);
  this.$el.on('change', this.handleChange);
}

componentWillUnmount() {
  this.$el.off('change', this.handleChange);
  this.$el.chosen('destroy');
}

handleChange(e) {
  this.props.onChange(e.target.value);
}

在CodePen中尝试

最后，还剩一件事做。在React里props会随时间而改变。例如，如果父组件state改变，<Chosen>组件可能会得到不同的children。这意味着集成的要点是我们必须手动地更新DOM节点来响应props的更新，因为我们已经不能让React再管理DOM节点。

Chosen的文档建议我们使用jQuery的trigger()API来通知原始DOM节点的更新。我们使用React去关注<select>标签内的子节点this.props.children的更新，我们会在生命周期函数componentDidUpdate中向Chosen通知子元素的改变。

componentDidUpdate(prevProps) {
  if (prevProps.children !== this.props.children) {
    this.$el.trigger("chosen:updated");
  }
}

这样一来，当React导致<select>子元素的改变时，Chosen将会所感知到DOM节点的更新。

Chosen组件的完整实现如下所示:

class Chosen extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.chosen();

    this.handleChange = this.handleChange.bind(this);
    this.$el.on('change', this.handleChange);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.children !== this.props.children) {
      this.$el.trigger("chosen:updated");
    }
  }

  componentWillUnmount() {
    this.$el.off('change', this.handleChange);
    this.$el.chosen('destroy');
  }

  handleChange(e) {
    this.props.onChange(e.target.value);
  }

  render() {
    return (
      <div>
        <select className="Chosen-select" ref={el => this.el = el}>
          {this.props.children}
        </select>
      </div>
    );
  }
}

在CodePen中尝试

与其他的视图库集成

感谢极具灵活性的方法ReactDOM.render()，使得React可以嵌入其他的应用中。

虽然React通常在启动时将单个根节点的React组件加载进DOM节点，但ReactDOM.render()也可以被多次调用来生成独立的部分UI，小到一个按钮，大到一个应用。

事实上，在Facebook中React就是这么用的。这使得我们可以一步一步地使用React编写程序，并与我们现存的服务器生成的模板与其他客户端代码相结合。

用React替换字符串渲染

在之前的web应用中，一种常见的模式是将DOM块作为字符串描述，并将其插入DOM节点，例如: $el.html(htmlString)。这种代码是非常适合引入React的，仅仅需要将渲染的字符串重写为React组件。

因此下面的jQuery实现:

$('#container').html('<button id="btn">Say Hello</button>');
$('#btn').click(function() {
  alert('Hello!');
});

可以用React组件重写成:

function Button() {
  return <button id="btn">Say Hello</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('container'),
  function() {
    $('#btn').click(function() {
      alert('Hello!');
    });
  }
);

从这里开始，你就可以将更多的逻辑移动进组件中，并采用更常见的React实践。例如，在组件，最好不要依赖id值，因为相同的组件可能被多次渲染。相反，我们可以使用React事件系统,直接在React的<button>元素上注册点击事件处理函数。

function Button(props) {
  return <button onClick={props.onClick}>Say Hello</button>;
}

function HelloButton() {
  function handleClick() {
    alert('Hello!');
  }
  return <Button onClick={handleClick} />;
}

ReactDOM.render(
  <HelloButton />,
  document.getElementById('container')
);

在CodePen中尝试

你可以按照你的想法创建多个独立的组件，并使用ReactDOM.render()将它们渲染进不同的DOM容器中。在随着你逐渐地将你的应用转成React应用的过程中，你会将组件合并成更大的组件，将将部分的ReactDOM.render()调用改为React的层次结构。

在Backbone视图中集成React

Backbone视图(View)是典型的使用字符串或者字符串产生函数来生成DOM元素的内容。这个过程可以通过渲染React组件来替代。

下面我们将创建一个名为ParagraphView的Backbone视图，它将用来覆盖Backbone的render函数，渲染React的<Paragraph>组件到Backbone提供的DOM节点。这里我们也使用ReactDOM.render():

function Paragraph(props) {
  return <p>{props.text}</p>;
}

const ParagraphView = Backbone.View.extend({
  render() {
    const text = this.model.get('text');
    ReactDOM.render(<Paragraph text={text} />, this.el);
    return this;
  },
  remove() {
    ReactDOM.unmountComponentAtNode(this.el);
    Backbone.View.prototype.remove.call(this);
  }
});

在CodePen中尝试

在remove方法中我们必须调用ReactDOM.unmountComponentAtNode()，使得React注销与组件树销毁时相关的事件处理函数和其他相关资源。

当组件从组件树中删除时，清除将自动执行，但是因为我们手动地移除整个组件树，我们必须调用这个方法。

React与Model层集成

尽管我们推荐使用单向数据流例如:React state、Flux或者Redux，但React组件仍然可以使用其他框架和库的model层。

在React组件中使用Backbone Models

对React组件而言，使用Backbone models最简单的方式就是监听不同的change事件并手动强制刷新。

负责渲染model的React组件必须监听'change'事件，负责渲染collections的React组件必须监听'add'和'remove'事件。在这些场景下，调用this.forceUpdate()用新的数据重新渲染组件。

在下面的例子中，List组件渲染Backbone的collection，而Item组件负责渲染单个items。

class Item extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.forceUpdate();
  }

  componentDidMount() {
    this.props.model.on('change', this.handleChange);
  }

  componentWillUnmount() {
    this.props.model.off('change', this.handleChange);
  }

  render() {
    return <li>{this.props.model.get('text')}</li>;
  }
}

class List extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange() {
    this.forceUpdate();
  }

  componentDidMount() {
    this.props.collection.on('add', 'remove', this.handleChange);
  }

  componentWillUnmount() {
    this.props.collection.off('add', 'remove', this.handleChange);
  }

  render() {
    return (
      <ul>
        {this.props.collection.map(model => (
          <Item key={model.cid} model={model} />
        ))}
      </ul>
    );
  }
}

在CodePen中尝试

从Backbone Models中提取数据

上述方法需要你的React组件了解Backbone的模型和集合。如果你随后计划迁移到另一个数据管理方案，你可能希望将Backbone的概念集中在尽可能少的代码中。

一个解决这个问题的方案是，每当模型的数据改变时将模型的属性提取成一个纯数据，并将逻辑保存在一个单一的位置。接下来的高阶组件提取Backbone中的属性作为state,并将数据传递给被包裹的组件。

这样，仅有高阶组件需要了解Backbone内部的model,应用中大多数的组件可以与Backbone保持独立。

在下面的例子中，我们将复制model的属性来形成最初的状态。我们订阅change事件(以及在卸载时的unsubscribe事件），当change事件发生时，我们使用model的当前属性来更新state。最终，我们确定，如果model属性本身改变时，我们不要忘记退订之前的model,订阅新的model。

请注意，下面的例子并不意味着涵盖与Backbone集成使用的方方面面，但是它提供一种通用的思路来解决上述的问题:

function connectToBackboneModel(WrappedComponent) {
  return class BackboneComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = Object.assign({}, props.model.attributes);
      this.handleChange = this.handleChange.bind(this);
    }

    componentDidMount() {
      this.props.model.on('change', this.handleChange);
    }

    componentWillReceiveProps(nextProps) {
      this.setState(Object.assign({}, nextProps.model.attributes));
      if (nextProps.model !== this.props.model) {
        this.props.model.off('change', this.handleChange);
        nextProps.model.on('change', this.handleChange);
      }
    }

    componentWillUnmount() {
      this.props.model.off('change', this.handleChange);
    }

    handleChange(model) {
      this.setState(model.changedAttributes());
    }

    render() {
      const propsExceptModel = Object.assign({}, this.props);
      delete propsExceptModel.model;
      return <WrappedComponent {...propsExceptModel} {...this.state} />;
    }
  }
}

为了演示如何使用这个例子，我们将NameInputReact组件连接到Backbone的model,并在每次输入改变时更新其firstName属性。

function NameInput(props) {
  return (
    <p>
      <input value={props.firstName} onChange={props.handleChange} />
      <br />
      My name is {props.firstName}.
    </p>
  );
}

const BackboneNameInput = connectToBackboneModel(NameInput);

function Example(props) {
  function handleChange(e) {
    model.set('firstName', e.target.value);
  }

  return (
    <BackboneNameInput
      model={props.model}
      handleChange={handleChange}
    />
  );
}

const model = new Backbone.Model({ firstName: 'Frodo' });
ReactDOM.render(
  <Example model={model} />,
  document.getElementById('root')
);

在CodePen中尝试

这个技术并不局限于Backbone。你可以通过在生命周期函数中订阅model改变并且可选地将model中的数据复制进React内部的state的方式，实现React与其他model库集成使用。