React简介

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>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<!-- 引入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语法规则

  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>
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区