【天贏金創】React 0.14 發佈，拆分爲 react 和 react-dom

React 0.14 正式發佈，此版本包括一些重要的改進，主要是簡化代碼編寫，提供更好的支持環境，好比 React Native。

• Reactjs 0.14 獲取：

React Dev build with warnings: https://fb.me/react-0.14.0.js
Minified build for production: https://fb.me/react-0.14.0.min.js

• React 0.14 with Add-Ons

Dev build with warnings: https://fb.me/react-with-addons-0.14.0.js
Minified build for production: https://fb.me/react-with-addons-0.14.0.min.js
React DOM (include React in the page before React DOM)
Dev build with warnings: https://fb.me/react-dom-0.14.0.js
Minified build for production: https://fb.me/react-dom-0.14.0.min.js

React 「一分爲二」

本來的 react package 被拆分爲 react 及 react-dom 兩個 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 這些 API，而 react-dom package 中包含 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode。

本來在服務端渲染用的兩個 API .renderToString 和 .renderToStaticMarkup 被放在了 react-dom/server 中。

改變以後的結構，一個基本的 React 組件變成了這樣：

var React = require('react');  
var ReactDOM = require('react-dom');var MyComponent = React.createClass({  
  render: function() {
    return <div>Hello World</div>;
  }
});

ReactDOM.render(<MyComponent />, node);
此外，本來 React.addons 下面的工具所有變成了獨立的 package：

react-addons-clone-with-props
react-addons-create-fragment
react-addons-css-transition-group
react-addons-linked-state-mixin
react-addons-perf
react-addons-pure-render-mixin
react-addons-shallow-compare
react-addons-test-utils
react-addons-transition-group
react-addons-update
ReactDOM.unstable_batchedUpdates （在 react-dom 中）

固然，本來的 API 在 v0.14 版中仍然可使用，只不過會有 warning，最終會在 v0.15 版的時候徹底移除。

refs 變成了真正的 DOM 節點

當咱們須要獲取 React 組件上某個 DOM 節點時，React 提供了 refs 方法方便咱們快速引用。爲了方便咱們使用，React 還「貼心」地對 refs 作了一層封裝，使用 this.refs.xxx.getDOMNode() 或 React.findDOMNode(this.refs.xxx) 能夠獲取到真正的 DOM 節點。

結果發現你們真正須要的就是 DOM 節點自己，封裝了半天徹底是浪費感情。

因而在 v0.14 版中 refs 指向的就是 DOM 節點，同時也會保留 .getDOMNode() 方法（帶 warning），最終在 v0.15 版中去除該方法。

var Zoo = React.createClass({  
  render: function() {
    return <div>Giraffe name: <input ref="giraffe" /></div>;
  },
  showName: function() {
    // 以前：
    // var input = this.refs.giraffe.getDOMNode();
    //
    // v0.14 版：
    var input = this.refs.giraffe;
    alert(input.value);
  }
});

須要注意的是，若是你給自定義的 React 組件（除了 DOM 自帶的標籤，如 div、p 等）添加 refs，表現和行爲與以前一致。

無狀態的函數式組件

其實在實際業務系統中使用 React 時，咱們會寫不少只有 render 方法的 React 組件。爲了減小冗餘的代碼量，React v0.14 中引入了 無狀態的函數式組件（Stateless functional components） 的概念。先看看長啥樣：

// 一個 ES6 箭頭函數定義的無狀態函數式組件var Aquarium = (props) => {  
  var fish = getFish(props.species);  return <Tank>{fish}</Tank>;
};// 或者更加簡化的版本var Aquarium = ({species}) => (  
  <Tank>
    {getFish(species)}
  </Tank>
);// 最終使用方式: <Aquarium species="rainbowfish" />

能夠看到，沒有 React.createClass，也沒有顯式的 render，寫起來更加輕鬆了。

固然，新語法也有須要注意的地方：

沒有任何生命週期方法，如 componentDidMount 等
不能添加 refs
能夠經過給函數添加屬性定義 propTypes 和 defaultProps
react-tools 及 JSXTransformer.js 已棄用

擁抱 Babel 吧同窗們！

編譯器優化

在 Babel 5.8.23 及更新的版本中，新增了兩項專門針對 React 的優化配置，僅推薦在生產環境中開啓，由於優化後會致使代碼的報錯更加撲朔迷離（原本報錯就已經很難定位了……）。

optimisation.react.inlineElements 將 JSX 元素轉換爲對象而非使用 React.createElement
optimisation.react.constantElements 針對擁有徹底靜態子樹的組件，將其建立過程提高到頂層（Top level），從而減小對 React.createElement 方法的調用

其它變化

React.initializeTouchEvents 已棄用
因爲 refs 的相關變化（見上文），TestUtils.findAllInRenderedTree 及相關的方法再也不接受 DOM 組件做爲參數，只能傳入自定義的 React 組件
props 一旦建立永遠不可修改，所以 .setProps 及 .replaceProps 已廢棄
children 不能夠傳對象類型，推薦傳入數組，或使用 React.createFragment 方法（其實就是轉換爲了數組）
React.addons.classSet 已經移除，使用 classnames package 替代
將要發生的改變

在 v0.15 版中，下列內容將會發生改變：

this.getDOMNode() 方法將會廢棄，推薦使用 React.findDOMNode()
setProps 及 replaceProps 將會廢棄
React.addons.cloneWithProps 已廢棄，推薦使用 React.cloneElements，新方法不會自動 merge className 及 style
React.addons.CSSTransitionGroup 將再也不監聽 transition 事件，所以使用者須要顯式指定動畫的 timeout，如：transitionEnterTimeout={500}。
ES6 組件類必須 extends React.Component（若是使用 React.createClass 語法則不受影響）
在屢次 render 中重用並改變 style 對象已經被棄用（這一點不是太明白，中心思想貌似是不要 mutate object？）
更多內容請看發行說明。

內容轉載自：http://undefinedblog.com/react-v0-14/