react 0.14 更新摘要

2024年3月26日 191次阅读 来源: YeatsZhang

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

    原文作者：YeatsZhang
    原文地址: https://segmentfault.com/a/1190000003833721
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞