React18基础一

于 2023-01-08 13:48:14 发布
阅读量500 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react 前端 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WebYanXin/article/details/128600518
本文介绍了React的基础知识，包括React的定义、特点、核心库及其关系。解释了React与ReactDOM、Babel的作用，强调了Babel在转换ES6到ES5语法中的重要性，并给出了React18之前的代码示例和新特性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

React是什么：

  1. react是用于构建用户界面的javaScript库
  2. react由Facebook来更新和维护,它是大量优秀程序员的思想结晶
  3. react官网: React 官方中文文档 – 用于构建用户界面的 JavaScript 库

React特点：

  1. 声明式编程:
    1. 只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面
  2. 组件化开发:
    1. 将复杂的界面拆分成一个个小的组件
  3. 多平台适配：
    1. 开发Web界面
    2. ReactNative 开发移动端跨平台 （不太推荐，不适合发展)
  4. ReactVR 虚拟现实Web应用程序

开发React必须依赖三个库:

  1. react: 包含react必须的核心代码
  2. react-dom: react渲染在不同平台上所需要的核心代码
  3. babel: 将jsx转换成react代码的工具

为什么要进行拆分?原因就是react-native:

  1. 这三个库各司其职,每个库只单纯做自己的事情
  2. react包含了react-web和react-native所共同拥有的核心代码
  3. react-dom针对web和native所完成的事情不同:
    1. web端: react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中
    2. native端: react-dom会将jsx最终渲染成原生的控件(比如Android中的Button,IOS中的UIButton)

babel是什么?

  1. babel,又名babel.js
  2. 俗称 编译器、转移器
  3. 很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,我们开发时希望使用它
  4. 编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法

React和Babel的关系:

  1. 默认情况下开发React其实可以不使用babel
  2. 但是前提是我们自己使用React.createElement来编写源代码,它编写的代码非常的繁琐和可读性差
  3. 那么我们就可以直接编写 jsx语法，并且让babel帮助我们转换成React.creatElement

React三个依赖库

  1. react
  2. react-dom
  3. babel

案例: 

  1. React18之前写法: 渲染hello react  
    1. <body>
    <div id="root"></div>
	// 原始引入需要在script里加type  
    <script type="text/babel">
        // 渲染helloword
        // react18之前：ReactDOM.render()
        ReactDOM.render(<h2>hello react</h2>,document.querySelector('#root'))
    </script>
</body>
  2. React18写法: 渲染hello react  
    1. <body>
    <div id="root"></div>
    <script type="text/babel">
        // react18之后:ReactDOM.createRoot()
     const root = ReactDOM.createRoot(document.querySelector('#root'))
        root.render(<h2>hello React</h2>)
    </script>
</body>
  3. 点击事件改变内容，无论是点击事件还是赋值在react里都是一个大括号{}
  4. 优化点击事件改变内容,可以把渲染部分封装成一个函数,因为react不会立即更新界面需要手动更新界面

     

  5. 1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值