博客

React18基础一

  • Post author:
  • Post category:其他


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


版权声明：本文为WebYanXin原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。