react 0.14后,将react分成两部分,react react-dom 模块。
在require时需要请求两个模块。
react包括:
React.createElement .createClass .COmponent .ProTypes .Children
react-dom包括:
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 组件上某个 DOM 节点时,React 提供了 refs 方法方便我们快速引用。为了方便我们使用,React 还「贴心」地对 refs 做了一层封装,使用 this.refs.xxx.getDOMNode()
或React.findDOMNode(this.refs.xxx)
可以获取到真正的 DOM 节点。
结果发现大家真正需要的就是 DOM 节点本身,封装了半天完全是浪费感情。
于是在 v0.14 版中 refs 指向的就是 DOM 节点,同时也会保留 .getDOMNode()
方法(带 warning),最终在 v0.15 版中去除该方法。
所以意见用0.14版本
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); } });
在 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?)
在网页里引用0.14.XX的版本
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/react-dom.js"></script>
<script src="bower_components/babel/browser.js"></script>
需要引用react-dom 和babel
以前是
<script type="type/jsx">
现在是
<script type="type/babel">
以前是React.render
现在是ReactDOM.render
也就是渲染用ReactDOM 了,还有把Jsx转换不用专门引用jsx.js了,而是用babel了。
那么script 的type也换成text/babel了