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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。