react概念及其jsx

最新推荐文章于 2024-06-15 19:02:23 发布

SYK---Programm

最新推荐文章于 2024-06-15 19:02:23 发布

阅读量216

点赞数 1

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

本文链接：https://blog.csdn.net/qq_62860882/article/details/128333174

版权

react.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.学习react之前，我们需要复习以下知识点

class 类

es6 高阶数组–jsx里面

es6 语法

模块化 node

npm 包的使用

请求

2.两个官方文档

中文 https://react.docschina.org/

英文 https://reactjs.org/

3.react的特点

声明式编码 => 通过已经封装(原生js的方法)的纯函数来实现你告诉react我要干啥,我干完之后剩下的事情由react完成(渲染页面)，还有一种编码方式是命令式编码！
纯函数：不影响外部变量，不影响外部的作用域！
组件化
React-native 移动开发，andriod和ios跨平台开发
使用的虚拟DOM加上优秀的diff算法
react非常接近原生js

4.引入react需要哪些东西

react的核心库

react用于操作DOM的库

5.构建一个简单的React应用

1.确定容器

2.构建虚拟DOM

React.createElement(标签名,标签属性,标签内容)

3.由react渲染页面

ReactDom.render(虚拟DOM，页面节点)

虚拟DOM比原生DOM更轻快，但最后会被转化成原生DOM

<div id="box1">

    </div>


    <script src="../js//react.development.js"></script>
    <script src="../js//react-dom.development.js"></script>
    <script>
        //创建虚拟节点
        let VNode = React.createElement('h1', { id: 'h1' }, 'hello world')
        //挂载节点
        ReactDOM.render(VNode, document.querySelector('#box1'))
    </script>

6.如果要嵌套结构，那该怎么做呢？

 <div class="box1"></div>

    <script src="../js//react.development.js"></script>
    <script src="../js//react-dom.development.js"></script>

    <script>
        let VNode = React.createElement('h1', { id: 'node' }, React.createElement('span', { class: 'span' }, '66666'))
        ReactDOM.render(VNode, document.querySelector('.box1'))
    </script>

这样做，如果一直往下做下去，显得太过于复杂了，因此，我们引入了jsx语法

7.jsx语法

首先，引入jsx的一个script标签

<script src="../js//babel.min.js"></script>

    <script type="text/babel"> // 一定要设置
        // 创建虚拟DOM
        let VDOM = <h1><span>Hello,World</span></h1>;

        // 由react渲染页面 
        ReactDOM.render(VDOM,document.getElementById("root")) // 唯一一次操作原生DOM节点
    </script>

总体例子：

 <div id="box1"></div>


    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js//babel.min.js"></script>
    <script type="text/babel">
        let VNode = <h1>
            <span>hello world!</span>
        </h1>
        ReactDOM.render(VNode, document.querySelector('#box1'))
    </script>

8.jsx语法总结

定义虚拟DOM的时候不需要写上字符串

jsx中写变量怎么写? {变量:表达式} ==> 模板字符串少了$

{} 必须是表达式 => 必须有返回值 || 必须有值

if(){}else switch() for() while等语法

遇到语法<开头代码,会以标签的形式去解析,转化成同名的html标签,

若html中没有这个同名标签,会报错

了解 => 若是遇到<大写开头字母,react就去渲染对应的组件,若没有定义组件会报错

样式怎么写

行内 style={{样式名:“样式值”}}

样式名使用小驼峰写法

<span style={{color:“red”,backgroundColor:“green”}}>{ ele }
;

类名使用className定义，class也会起作用，但是会报错！

虚拟DOM只能存在一个根节点

jsx支持换行, 建议你使用()包裹,避免出现bug问题

标签必须闭合

arr 直接放入{arr}中好像是将数组中的每一项拿出来,渲染到页面

{} 必须是表达式 => 必须有返回值 || 必须有值

map filter reduce 10 a + b

{} 会自动循环数组