认识React

更新于 2019-08-05  约 4 分钟

与VueJs的区别

  • Vue更注重视图的自动同步,使用习惯偏向前端人员
  • React更注重组件及其状态的管理,使用习惯偏向程序人员

React生态圈

  • jsx:扩展了js自身的语法,是React的基础
  • Flux:React的数据流组件
  • Redux:比Flux更加简单,易用
  • React-Native:用react编写原生移动应用
  • React-Server:服务端渲染React组件

JSX

jsx是一门独立的语言,希望能改进js的很多问题,但是ES6出现后,包含了jsx的大部分特性,所以很少独立使用

  • babel可以编译jsx
  • react是基于jsx语法

JSX的主要特色

提供模板式创建元素的方法


//普通元素创建
let oDiv = document.createElement('div');
oDiv.title = 'DarkCode';
oDiv.innerHtml = "box";

//jsx方式
let oDiv = <div title="DarkCode">box</div>  
注意:jsx并不会真正的创建DOM元素(内部名称:Node),jsx只是解析模板语法,创建虚拟DOM节点需经由ReactDOM渲染才会成为真正的DOM元素

关于虚拟DOM

直接操作DOM元素非常缓慢(资源开销是普通数据操作的数千倍),所以很多框架(Vue、React)都具备虚拟DOM特性,我们直接操作的是虚拟DOM,而非真实节点,React会在合适的时机批量更新DOM节点(一般是主进程空闲时),从而提高性能

能否单独使用JSX

不能,React强依赖JSX用于解析jsx语法,但jsx强依赖于React用于解析模板语法

第一个Rect程序

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>

    <div id="div1"></div>

    <script type="text/babel">
    let oDiv=document.getElementById('div1');

    ReactDOM.render(<span>aaa</span>, oDiv);
    </script>
  </body>
</html>
  • browser:babel,用于编译jsx
  • react:react核心库
  • react-dom:用于渲染组件

特殊属性

在react中的"html代码",其实并不是真正的html,而是一种jsx语法,绝大部分标签一样用,但有两个属性需要注意:

  • class:className
  • for:htmlFor

单标签

React中单标签必须闭合(html标签和自定义组件都是)

  • <img src=""> 错误
  • <img src=""/> 正确
阅读 289更新于 2019-08-05

推荐阅读
React学习之路
用户专栏

我爱学习,学习使我快乐,^_^

3 人关注
16 篇文章
专栏主页
目录