React 入门到精通

最新推荐文章于 2024-04-29 09:48:16 发布

吾爱编程哇

最新推荐文章于 2024-04-29 09:48:16 发布

阅读量402

点赞数

文章标签： react.js 前端

本文链接：https://blog.csdn.net/mq962003298/article/details/129699559

版权

React 入门到精通

01 【react入门】

1.React简介

react是什么？

React 是一个用于构建用户界面的 JavaScript 库。

是一个将数据渲染为 HTML 视图的开源 JS 库
它遵循基于组件的方法，有助于构建可重用的 UI 组件
它用于开发复杂的交互式的 web 和移动 UI

React 有什么特点？

使用虚拟 DOM 而不是真正的 DOM
它可以用服务器渲染
它遵循单向数据流或数据绑定
高效
声明式编码，组件化编码

React 的一些主要优点？

它提高了应用的性能
可以方便在客户端和服务器端使用
由于使用 JSX，代码的可读性更好
使用React，编写 UI 测试用例变得非常容易

为什么学？

1.原生JS操作DOM繁琐，效率低

2.使用JS直接操作DOM,浏览器会进行大量的重绘重排

3.原生JS没有组件化编码方案，代码复用低

在学习之前最好看一下关于npm的知识：下面是我在网上看见的一个写的还不错的npm的文章

npm

2.React 基础案例

首先需要引入几个 react 包

React 核心库、操作 DOM 的 react 扩展库、将 jsx 转为 js 的 babel 库

【先引入react.development.js，后引入react-dom.development.js】

react.development.js

react 是react核心库，只要使用react就必须要引入
下载地址：https://unpkg.com/react@18.0.0/umd/react.development.jsopen in new window

react-dom.development.js

react-dom 是react的dom包，使用react开发web应用时必须引入
下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.jsopen in new window

babel.min.js

由于JSX最终需要转换为JS代码执行，所以浏览器并不能正常识别JSX，所以当我们在浏览器中直接使用JSX时，还必须引入babel来完成对代码的编译。
babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js

react.development.js
react-dom.development.js
babel.min.js

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test">

    </div>
    <!--引入顺序不能变  -->
     <!--引入react核心库  -->
     <script type="text/javascript" src="../js/react.development.js"></script> 
    <!-- 引入react-dom.用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script  type="text/babel">/* 此处一定要写babel */
      //1.创建虚拟dom
      const VDOM = <h1>Hello ,react</h1> /* 此处一定不要写引号，因为不是字符串 */
      //2.渲染虚拟dom到页面
      const root = ReactDOM.createRoot(document.querySelector('#test'));
      root.render(VDOM);
    </script>
</body>
</html>

后面很多地方没有用createRoot这种方式是因为一开始学的课程是2020年的，这是现在新的创建方式。

这里我就只把第一个案例改成新方式了

这样，就会在页面中的这个div容器上添加这个h1.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VC4f9quQ-1679409954917)(C:\Users\root\AppData\Roaming\Typora\typora-user-images\image-20230320225615666.png)]

3.jsx 语法

JSX 是 JavaScript 的语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。JSX便是React中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。使用JSX将我们所期望的网页结构编写出来，然后React再根据JSX自动生成JS代码。所以我们所编写的JSX代码，最终都会转换为以调用React.createElement()创建元素的代码。

1.定义虚拟DOM，JSX不是字符串，不要加引号

2.标签中混入JS表达式的时候使用{}

     const hid='title'
     const sname='Hello,React'
      //1.创建虚拟dom
      const VDOM =(
        <h2 id={hid} >
          <span>{sname}</span>
        </h2>
      )

3.样式的类名指定不能使用class，使用className

    <!-- css -->
    <style>
        .titles{
           background-color: blanchedalmond;
           width: 200px;
        }
    </style>

    <h2 className='titles' id={hid} >
          <span>{sname}</span>
    </h2>

4.内敛样式要使用{{}}包裹

  <span style={{color:'skyblue',fontSize:'24px'}}> {sname}</span>

5.不能有多个根标签，只能有一个根标签

6.JSX的标签必须正确结束（自结束标签必须写/）

const VDOM =(/* 此处一定不要写引号，因为不是字符串 */
        <div>
            <h1 className='titles' id={hid} >
            <span>{sname}</span>
            </h1>
            <input type="aaa"/>
        </div>
      )

7.JSX中html标签应该小写，React组件应该大写开头。

如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；
如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

8.如果表达式是空值、布尔值、undefined，将不会显示

关于JS表达式和JS语句：

JS表达式：返回一个值，可以放在任何一个需要值的地方 a a

例如：
- +b
- demo(a)
- arr.map()
- function text(){}
JS语句：不会返回一个值

例如：
- if(){}
- for(){}
- while(){}
- swith(){}

JSX 小练习

根据动态数据生成 li

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmnauSHQ-1679409996596)(C:\Users\root\AppData\Roaming\Typora\typora-user-images\image-20230321151430711.png)]

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端js框架列表</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!--引入顺序不能变  -->
     <!--引入react核心库  -->
     <script type="text/javascript" src="../js/react.development.js"></script> 
    <!-- 引入react-dom.用于支持react操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script  type="text/babel">/* 此处一定要写babel */
    const date= ['Angular','React','Vue']
      //1.创建虚拟dom
      const VDOM = (
        <div>
            <h1>前端js框架列表</h1> 
             <ul>
                {
                    date.map((item,index)=>{
                        return <li key={index}>{item}</li>
                         
                    })  
                }
            </ul>
        </div>
        
      )
      //2.渲染虚拟dom到页面
      const root = ReactDOM.createRoot(document.querySelector('#test'));
      root.render(VDOM);
    </script>
</body>
</html>

02 【面向组件编程】

1.组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

只有两种方式的组件

函数组件
类式组件

注意：

组件名必须是首字母大写（React 会将以小写字母开头的组件视为原生 DOM 标签。例如，< div />代表 HTML 的 div 标签，而< Weclome /> 则代表一个组件，并且需在作用域内使用 Welcome）
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签 < />

渲染类组件标签的基本流程

React 内部会创建组件实例对象
调用render()得到虚拟 DOM ,并解析为真实 DOM
插入到指定的页面元素内部

1.1 函数式组件

定义组件最简单的方式就是编写 JavaScript 函数：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>函数式组件</title>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!--引入顺序不能变  -->
  <!--引入react核心库  -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom.用于支持react操作dom -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel,用于将jsx转为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">/* 此处一定要写babel */
    //1.创建函数式组件
    function MyComponent(){
      console.info(this); //此处的this是undefined,因为babel编译后开启了严格模式
      return <h2>我是函数定义的组件(适用于【简单组件】的定义)</h2>
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'));
    /*
    执行过程：
          React解析组件标签，找到相应的组件
          发现组件是类定义的，随后new出来的类的实例，并通过该实例调用到原型上的render方法
          将render返回的虚拟DOM转化为真实的DOM,随后呈现在页面中
    */
  </script>
</body>

</html>

吾爱编程哇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 入门到精通

是一个用于构建用户界面的 JavaScript 库。React 有什么特点？React 的一些主要优点？1.原生JS操作DOM繁琐，效率低2.使用JS直接操作DOM,浏览器会进行大量的重绘重排3.原生JS没有组件化编码方案，代码复用低在学习之前最好看一下关于npm的知识：下面是我在网上看见的一个写的还不错的npm的文章。
复制链接

扫一扫