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了


### React版本列表及其重要特性 以下是关于 React 各个版本的时间线以及其主要特性的总结: #### React 16 (2017年9月) React 16 是一次重要的升级,带来了许多新功能和改进。其中最显著的变化包括支持错误边界(Error Boundaries),允许开发者捕获并处理 JavaScript 错误而不崩溃整个应用程序[^1]。 #### React 17 (2020年10月) React 17 主要关注于向后兼容性和更平滑的迁移路径。此版本减少了 DOM 属性冲突的可能性,并优化了事件委托机制。尽管没有引入太多新的 API 或概念,但它为后续的大规模改动奠定了基础。 #### React 18 (2022年3月) React 18 带来了并发模式(Concurrent Mode)的支持,默认启用了自动批处理(Automatic Batching),从而提高了性能。此外还增强了 Suspense 功能,使得数据获取更加灵活高效。值得注意的是,React 18 中也正式推出了 createRoot 方法来替代 ReactDOM.render() 进行根节点挂载操作。 #### 即将到来的 React 19 预计在不久之后发布的 React 19 将继续推进团队对于提升框架效率的目标。根据目前透露的信息显示,未来可能会有一个全新的编译器加入到工具链当中。这个潜在的新成员旨在进一步简化开发流程,通过自动化手段解决当前依赖 `useMemo`、`useCallback` 和 `memo` 手动控制重新渲染的问题。 另外需要注意的是,在迁移到更高版本之前,请务必确认您的项目已经做好充分准备适应可能存在的破坏性更改。例如从 React Native 0.78 开始就需要针对某些废弃接口做出相应调整才能顺利过渡至最新版 React 环境下运行[^3]。 ```javascript // 示例:如何检查当前使用的 React 版本号 console.log(React.version); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值