react入门

最新推荐文章于 2024-05-20 15:17:08 发布

前进的北极熊

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量62

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_57809042/article/details/129543037

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1 为什么要学？

原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
原生JavaScript没有组件化编码方案，代码复用率低。

1.1 特点

采用组件化模式、声明式编码，提高开发效率及组件复用率。
在React Native中可以使用React语法进行移动端开发。
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

2 React基本使用

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

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-from，用于支持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到页面
    ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>
</html>

2.1 相关js库

react.js：React核心库。
react-dom.js：提供操作DOM的react扩展库。
babel.min.js：解析JSX语法代码转为JS代码的库。

2.2 创建虚拟DOM的两种方式

JSX方式

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

Js方式（一般不用）

<script type="text/javascript">  /* 此处一定要写babel */
    // 1.创建虚拟dom
    const VDOM = React.createElement('h1',{id: 'title'}, React.createElement('span', {}, 'Hello, React'));
    // 2.渲染虚拟dom到页面
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>

2.3 虚拟DOM与真实DOM

React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')

上面创建的就是一个简单的虚拟DOM对象

虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

3 React JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
作用: 用来简化创建虚拟DOM

写法：var ele = <h1>Hello JSX!</h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jsx语法规则</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
  </head>

  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-from，用于支持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">
        const myId = 'aTgUiGu';
        const myData = 'HeLlo, rEaCt';
      // 1.创建虚拟DOM
      const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
            <span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <h2 className="title" id={myId.toUpperCase()}>
            <span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
        </h2>
        <input type="text"/>
        <good>123</good>
            </div>
      );
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById('test'));

      /* jsx语法规则
      1. 定义虚拟DOM时，不要写引号。
      2. 标签中混入JS表达式要用{}
      3. 演示类名指定不要用class，要用className
      4. 内联样式，要用style={{key:value}}的形式去写
      5. 只有一个根标签
      6. 标签必须闭合
      7. 标签首字母
           （1）若小写首字母。则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错
           （2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
           
      */
    </script>
  </body>
</html>

3.1 JSX练习

需求: 动态展示如下列表

在这里插入图片描述

代码：

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

<head>
    <meta charset="UTF-8">
    <title>1_使用jsx创建虚拟DOM</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-from，用于支持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"> 
    /*
    一定区分注意：【js语句（代码）】与【js表达式】
    1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值得地方
            下面这些都是表达式：
            （1）a   (2)a + 1 (3)demo(1)  (4)arr.map()  (5) function test()
    2. 语句（代码）：
            这些都是语句（代码）：
             (1)if(){}  (2) for(){}  (3) switch() {case: xxx}
    */
    // 模拟一些数据
    const data = ['Angular', 'React', 'Vue'];
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul >
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
                </div>
        )
        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>
</body>
</html>

4 模块与组件、模块化与组件化的理解

4.1 模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

4.2 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

4.3 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4.4 组件化

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

前进的北极熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react入门

（1）若小写首字母。则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析。（2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含。babel.min.js：解析JSX语法代码转为JS代码的库。当应用的js都以模块来编写的, 这个应用就是一个模块化的应用。
复制链接

扫一扫