【ReactJS】V0.14版本前后的变化

迈不过友情╰ 2022-06-04 05:13 62阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>V0.14版本之前</th> 
   <th>V0.14版本之后</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>通过React.createClass方式创造组件类</td> 
   <td>通过class 类名 extends Component { </td> 
  </tr> 
  <tr> 
   <td>React.render</td> 
   <td>ReactDOM.render</td> 
  </tr> 
  <tr> 
   <td>React.findDOMNode</td> 
   <td>ReactDOM.findDOMNode</td> 
  </tr> 
  <tr> 
   <td>react component上的ref属性指向的是对React DOM Component<br>的引用，并不是页面上真实的DOM节点</td> 
   <td>ref开始指向真实的DOM节点</td> 
  </tr> 
  <tr> 
   <td>需要引入：<br>react.js -&gt; React主要核心<br>JSXTransformer.js -&gt; 为了把 JSX 转成标准的 JavaScript</td> 
   <td>需要引入：<br>react.js -&gt; React主要核心<br>react-dom.js -&gt; React DOM 操作<br> browser.min.js -&gt; 将 babel 转换成浏览器可用的 ES5（这是Babel.js的浏览器版本）</td> 
  </tr> 
  <tr> 
   <td><code>const Sample = React.createClass({ </code><br><code>　　getInitialState: function() { </code><br><code>　　　　return {foo: 'bar'};</code><br><code>　　},</code><br><code>　　getDefaultProps: function() { </code><br><code>　　　　return {sampleProps: 0}</code><br><code>　　}</code><br><code>});</code></td> 
   <td><code>class Sample extends React.Component { </code><br><code>　　constructor(props) { </code><br><code>　　　　super(props);</code><br><code>　　　　this.state = {foo: 'bar'};</code><br><code>　　}</code><br><code>};</code><br><code>Sample.defaultProps = { </code><br><code>　　sampleProp: 0</code><br><code>};</code></td> 
  </tr> 
 </tbody> 
</table>

## React.render 与 ReactDOM.render ##

V0.14版本之后把react分成了react和react-dom两个部分，这样就为web端的react和移动端的React Native共享组件铺平了道路，也就是说我们可以跨平台使用相同的react组件。

react-dom包包括ReactDOM.render，.unmountComponentAtNode和.findDOMNode。在 react-dom/server ，有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。  
　　  
　　总的来说，两者的区别就是：ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，并将其移动到一个更合适的存储库。