React 版本

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);

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 版中去除该方法。

所以意见用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了


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值