超详细的新手React入门教程

React简介react是什么？为什么学？React入门React 基础案例JSX基础语法两种创建虚拟DOM的方式1.使用JSX创建虚拟DOM2.使用JS创建虚拟DOMjsx语法规则模块与组件、模块化与组件化的理解模块组件模块化组件化函数式组件类式组件react是什么？React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。为什么学？原生JS操作DOM繁琐，效率低使用JS直

韩子昕

17738人浏览 · 2021-07-26 19:24:38

韩子昕 · 2021-07-26 19:24:38 发布

React简介

react是什么？
为什么学？
React入门
- React 基础案例
JSX基础语法

react是什么？

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

为什么学？

原生JS操作DOM繁琐，效率低
使用JS直接操作DOM,浏览器会进行大量的重绘重排
原生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>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<!-- 引入react核心库-->
<script src="../js/react.development.js" type="text/javascript"></script>
<!-- 引入react-dom，用于支持react操作DOM-->
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<!-- 引入babel，用于将js转为js-->
<script src="../js/babel.min.js" type="text/javascript"></script>

<!--这里使用了babel用来解析jsx语法-->
<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语法规则

定义虚拟DOM，不能使用“”
标签中混入JS表达式的时候使用{}
样式的类名指定不要使用class，使用className
内敛样式要使用双大括号包裹
不能有多个根标签，只能有一个跟标签
标签必须闭合
如果小写字母开头，就将标签转化为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>

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

模块

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

组件

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

模块化

当应用的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>