react系列（3）组件创建、检测和移除

在React16.0.0版本后，创建组件的主要方法React.createClass被移除了，这个会在后续文章中关于ES5+React+Webpack组合应用中会介绍。本系列文章仍用React.createClass作为创建组件的主要方法。在创建自定义组件时要注意：组件名称首字母必须为大写，否则将不通过。

组件创建

常用的创建组件的方法为React.createClass：

var HelloWorld = React.createClass({    render: function() {      return (      <div>      <h1>Hello World!</h1>      </div>      );    }  });  ReactDOM.render(    <HelloWorld />,    document.getElementById('example'));

上例中HelloWorld就是一个简单组件。

除了React.createClass外，还可以通过使用React.createElement来创建组件（就是通过脚本嵌套多个元素到一个根元素的方式创建一个组件）。React.createElement的写法：

var ele = React.createElement('ul', { className: 'my-list' }, child1, child2, child3);

第一个参数是一个html标签名称字符串，也可以是一个ReactClasss，这个参数对于createElement来说是必须的。

第二个参数是该标签的属性，这个参数是可选的。

第三个参数是该元素的子节点，同样也是可选的。

React.createElement方法创建并返回一个给定类型的ReactElement元素。

var h1 = React.createElement('h1',null,"Hello World");var div = React.createElement('div',null,h1);ReactDOM.render(div,document.getElementById("example"));

通过React.createFactory工厂方法可以批量创建组件：

var CompClass = React.createClass({render:function(){return (<div><h1>{this.props.children}</h1></div>);}});var Comp = React.createFactory(CompClass);var HelloWorld = React.createElement('div',null,Comp(null,'Hello World1'),Comp(null,'Hello World2'));ReactDOM.render(HelloWorld,document.getElementById("example"));

（注）上例中通过React.createFactory创建了两个结构一样但内容不同的组件Hello World1和Hello World2，而CompClass仅作为结构提供方。

组件的参数传递可以通过props实现：

var HelloWorld = React.createClass({render:function(){return <h1>Hello {this.props.name}</h1>}});ReactDOM.render(<HelloWorld name="Dear" />,document.getElementById("example"));

把参数设置为属性attr，然后在组件渲染中通过{this.props.attr}的方式读取，上例中{this.props.name}的值就是“Dear”。

组件的检测

创建组件后，我们可以通过React.isValidElement()方法来检测组件的有效性，目的是为了增强代码的健壮性，确定传入是否为React Element，防止渲染出错。要注意，React.isValidElement()只对React创建的组件检测有效，对已被转化为纯文本的组件脚本无效。比如说，若React创建的组件放在服务端渲染，返回到前端的将会是一串脚本字符串，React.isValidElement()对这类脚本字符串检测总为false。

var HelloWorld = React.createClass({    render: function() {      return (      <div>      <h1>Hello World!</h1>      </div>      );    }  });  ReactDOM.render(    <HelloWorld />,    document.getElementById('example'));var helloWorld_HtmlText = ReactDOMServer.renderToString(<HelloWorld />);console.log(React.isValidElement(<HelloWorld />));  // trueconsole.log(React.isValidElement(helloWorld_HtmlText)); // fase

组件的移除

ReactDOM提供的移除组件：

ReactDOM.unmountComponentAtNode(document.getElementById('example'));

我们也可以用原生js脚本移除组件：

var f = document.getElementById("example");var childs = f.childNodes; for(var i = 0; i < childs.length; i++) {   f.removeChild(childs[i]); }

另外，ReactDOM提供了对节点的查找方法：ReactDOM.findDOMNode

<script type="text/babel">var HelloWorld = React.createClass({        render: function() {          return (          <div>          <h1>Hello World!</h1>          </div>          );        }      });    var reactEle = ReactDOM.render(        <HelloWorld />,        document.getElementById('example')    );    console.log(ReactDOM.findDOMNode(reactEle));</script>

查找到的节点对象，可以配合jQuery进行使用。