认识React

2023年5月30日 115次阅读 来源: darkCode

与VueJs的区别

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

React生态圈

  • jsx:扩展了js自身的语法，是React的基础
  • Fulx: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=””/> 正确
    原文作者：darkCode
    原文地址: https://segmentfault.com/a/1190000019969270
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞