javascript - 如何在 Reactjs 中创建组件实例

Question

当我在 init() 中调用 ReactDom.render 时，只创建了一个 g 标签，所有的圆圈都在这个 中创建g 标签。但我希望在每次 ReactDom.render 调用时都必须创建一个单独的 g 标签。我对 React 组件的了解是，我们可以使用 React.createClass 实例化任意数量的组件。我怎样才能做到这一点？

var Rect = React.createClass({
  render: function() {
    return (
      React.createElement('circle', {
        cx: this.props.cx,
        cy: this.props.cy,
        r: this.props.r,
        fill: '#00ff00'
      });
    );
  }
});

var globalArray = [];
var someFunc = function(cx, cy, r) {
  var Factory = React.createClass({
    render: function() {
      var localArray = [];
      for(var i = 0; i < 1; i++) {
        localArray[i] = React.createElement(Rect, {
          key: globalArray.length,
          cx: cx,
          cy: cy,
          r: r
        })
      }

      globalArray[globalArray.length] = localArray[0];
      return (
        React.createElement('g', {}, globalArray)
      )
    }
  });
  return Factory;
}

var randomNumber = function (x,y) {
  return ~~(Math.floor(((Math.random()*x) + y )));
}

var obj = {
  init: function() {
    var element;
    for(var i = 0; i < 100; i++) {
      var cx = randomNumber(1200,40);
      var cy = randomNumber(600,40);
      var r = randomNumber(30,20);
      element = someFunc(cx,cy,r);
      ReactDOM.render(
        React.createElement(element,{}),         
        document.getElementById('svg')
      );
    }       
  }
}

Answer 1

您可能会发现让代码结构由 React 组件定义而不是您自己的函数和全局变量会让您受益。

通常，如果您发现自己多次调用 ReactDOM.render，那么很可能出了问题。

顶级组件

与其将 100 个组件渲染到一个元素中，不如定义一个由 100 个子组件实例组成的顶级组件，然后渲染一次。

var Graphics = React.createClass({
  // ...
});

ReactDOM.render(
  React.createElement(Graphics, null),
  document.getElementById('svg')
);

我们将创建一个 Graphics 组件，我们可以将其用作其余组件的父组件。 我们只需要渲染一次。

状态

与其将圈子列表存储在全局数组中，不如在新的顶级组件上使用 state 属性。这样，无论何时更新它，组件都会重新呈现以反射(reflect)更改。

getInitialState: function() {
  // by default there are no circles (empty array)
  return { circles: [] };
},
componentWillMount: function() {
  var circles = [];

  for(var i = 0; i < 100; i++) {
    // rather than storing actual circles, we just store
    // the props that are needed to create them
    circles.push({
      cx: randomNumber(1200, 40),
      cy: randomNumber(600, 40),
      r: randomNumber(30,20)
    });
  }

  this.setState({ circles: circles });
}

getInitialState 允许我们为 this.state 上的属性定义默认值，componentWillMount 允许我们在渲染组件之前运行代码在 DOM 中。

渲染

既然 Graphics 组件知道圆列表，我们必须描述它的呈现方式。

render: function() {
  var circles = this.state.circles.map(function(props) {
    return React.createElement(Circle, props);
  });

  return React.createElement('g', null, circles);
}

此函数使用 map 创建一个 Circle 组件，使用我们存储在 this.state.circles 中的属性。

结论

当您将组件构建为位于一个顶级容器组件中时，React 是最有效的，就像我们在此处创建的那样。与其执行任何命令式操作(例如每次循环和渲染组件)，不如寻找声明式的替代方法。

React 希望您告诉它您想要什么，而不是如何它应该完成。

在这种情况下，你想要的是一个内部有许多随机大小和位置的圆圈的组件，但你试图做的是向 React 解释如何它应该着手实现这一目标。

var Circle = React.createClass({
  render: function() {
    // ...
  }
});

var Graphics = React.createClass({
  getInitialState: function() {
    // ...
  },
  componentWillMount: function() {
    // ...
  },
  render: function() {
    // ...
  }
});

生成的代码不仅应该更短、更容易理解，而且应该易于重构。无需太多工作，您就可以将配置细节(例如圆圈数)移出成为 Graphics 的 Prop 。