react 0.14 更新摘要

React 0.14 更新摘要

讀 react 0.14 changelog 時簡單地記錄了下重點。

install

在development環境下react會作warning檢查，使用NODE_ENV=production來避免檢查，提升react的速度。

major change

Two Packages: React and React DOM

拆分爲 react react-dom 兩個類庫。

• react

  • createElement

  • createClass

  • Component

  • PropTypes

  • Children

• react-dom

  • render

  • unmountComponentAtNode

  • findDOMNode

  • react-dom/server

    • renderToString

    • renderToStaticMarkup

• addons 被移到獨立的包中

  • 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 in react-dom.

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

Stateless functional components

對於簡單的無狀態的組件（只有一個render函數），提供新的更加簡單的語法去聲明。

// A functional component using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

// Then use: <Aquarium species="rainbowfish" />

• 表現跟只有一個render函數的組件同樣

• 因爲不會建立實例，添加的ref將會返回null

• 函數聲明的組件將沒有lifecycle函數，可是能夠將.propTypes 和 .defaultProps 設置爲該函數的屬性

react-tools 被取消

使用 babel 對 jsx 進行編譯

Breaking changes

• React.initializeTouchEvents 被移除，默認支持 touch 事件

• Add-Ons: Due to the DOM node refs change mentioned above, TestUtils.findAllInRenderedTree and related helpers are no longer able to take a DOM component, only a custom component.

會產生警告的改變

• props 如今不可改變， 使用 React.cloneElement

• React.children 不支持使用 Plain Object，使用array做爲替代。也能夠使用 createFragment 來進行遷移

• Add-Ons classSet 被移除， 使用 classnames