超详细的新手React入门教程

野性酷女 2022-08-31 14:29 219阅读 0赞

### React简介 ###

*  react是什么？
 *  为什么学？
 *  React入门
 *   *  React 基础案例
 *  JSX基础语法
 *   *  两种创建虚拟DOM的方式
     *   *  1.使用JSX创建虚拟DOM
         *  2.使用JS创建虚拟DOM
     *  jsx语法规则
     *  模块与组件、模块化与组件化的理解
     *   *  模块
         *  组件
         *  模块化
         *  组件化
         *  函数式组件
         *  类式组件

# react是什么？ #

React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。

# 为什么学？ #

1.  原生JS操作DOM繁琐，效率低
2.  使用JS直接操作DOM,浏览器会进行大量的重绘重排
3.  原生JS没有组件化编码方案，代码复用低

# React入门 #

## React 基础案例 ##

1.先倒入三个包：

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

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

2.创建一个容器

3.创建虚拟DOM，渲染到容器中

<body>
        
        <div id="test">
    
        </div>
    </body>
    
    
    <script src="../js/react.development.js" type="text/javascript"></script>
    
    <script src="../js/react-dom.development.js" type="text/javascript"></script>
    
    <script src="../js/babel.min.js" type="text/javascript"></script>
    
    
    <script type="text/babel">
            // 1.创建虚拟DOM
            const VDOM = <h1>Hello</h1>  //这个地方使用的是JSX语法，不需要加""
            // 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
            ReactDOM.render(VDOM,document.getElementById("test"));        
    </script>
    </html>

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

# JSX基础语法 #

## 两种创建虚拟DOM的方式 ##

### 1.使用JSX创建虚拟DOM ###

const VDOM = (
                <h1 id = { MyId.toLocaleUpperCase()}>
                    <span className = "sss" style = { { fontSize:'50px'}}>sss</span>
                </h1>
            )

这个在上面的案例中已经演示过了 ，下面看看另外一种创建虚拟DOM的方式

### 2.使用JS创建虚拟DOM ###

// 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
    const VDOM = React.createElement('h1',{ id:"title"},"nihao")

使用JS和JSX都可以创建虚拟DOM，但是可以看出JS创建虚拟DOM比较繁琐，尤其是标签如果很多的情况下，所以还是比较推荐使用JSX来创建。

## jsx语法规则 ##

1.  定义虚拟DOM，不能使用“”
2.  标签中混入JS表达式的时候使用\{\}
3.  样式的类名指定不要使用class，使用className
4.  内敛样式要使用双大括号包裹
5.  不能有多个根标签，只能有一个跟标签
6.  标签必须闭合
7.  如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错

<body>
        <div id="test"></div>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <script type="text/babel">/*此处一定要写babel*/
        const Myid='abc'
        const MyData='Hollow,React'
        //创建虚拟DOM
         const VDOM=(
             <div>
                <h1 className='title' id={ Myid.toLowerCase()}>
                     <span style={ { color:'white',fontSize:'20px'}}>{ MyData.toLowerCase()}</span>
                </h1>
                <h1 className='title' id={ Myid.toUpperCase()}>
                     <span style={ { color:'white',fontSize:'20px'}}>{ MyData.toUpperCase()}</span>
                </h1>
            </div>
             
            )
        //渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
        </script>
    </body>

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

### 模块 ###

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

### 组件 ###

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

### 模块化 ###

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

### 组件化 ###

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

### 函数式组件 ###

<body>
        <div id="test"></div>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <script type="text/babel">/*此处一定要写babel*/
        function MyComponent(){ 
            return <h2>函数式组件</h2>//此处this是undefined,因为babel编译后开启了严格模式
        }
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        /* 执行了ReactDOM。render(<Mycomponent/>....之后，发生了什么?) 1.React解析组件标签，找到了Mycomponent组件 2.发现组价是使用函数定义的，随后调用函数，将返回的虚拟DOM传为真实DOM，随后呈现在页面中 */
        </script>
    </body>

### 类式组件 ###

<body>
        <div id="test"></div>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>
        <script type="text/babel">/*此处一定要写babel*/
        class Mycomponent extends React.Component{ 
            render(){ 
                //render是放在哪里的？ Mycomponent的原型上，供实例使用
                //render中的this是谁？ Mycomponent的实例对象<=>Mycomponent组件实例对象
                console.log(this)
                return <h1>我是用类定义的组件(适用于【复杂组件】的定义)</h1>
            }
        }
        ReactDOM.render(<Mycomponent/>,document.getElementById('test'))
        /* 执行了ReactDOM。render(<Mycomponent/>....之后，发生了什么?) 1.React解析组件标签，找到了Mycomponent组件 2.发现组价是使用函数定义的，随后new出来该类的实例，并通过实例调用到原型上的render方法 3.将render返回的虚拟DOM转为真实DOM,随后呈现到页面中 */
        </script>
    </body>