React学习笔记1-基础知识-优快云博客

本文链接：https://blog.youkuaiyun.com/cy_mint/article/details/129580578

文章介绍了React的核心特性，包括组件化编程、声明式编码对比命令式编码，以及ReactNative用于移动端开发。重点讲解了虚拟DOM的概念，减少与真实DOM交互的优化，和JSX语法，如创建虚拟DOM、混入JavaScript表达式、内联样式等。此外，还提到了模块和组件的区别，以及如何通过map方法动态渲染列表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.特点
1）组件化、声明式编码（原生js 命令式编码）

命令式：你往左走三步，拿水给我
声明式：嗓子干

2）React Native可以使用React进行移动端开发（js编写）
3） 虚拟dom+diffing算法，减少与真实dom的交互

2.hello,React
1）js文件
请添加图片描述
2）相关代码

 <!--容器 -->
  <div id="test"></div>

  <!--引入react核心库 顺序-->
  <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>
  
  <!--babel-->
  <script type="text/babel">
    //1.创建虚拟DOM (不加引号)
    const VDOM = (
      <h1 id="title">
        <span>Hello,React</span>
      </h1>
    )
    //2.渲染虚拟DOM到页面     ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>

3.两种方式创建虚拟DOM（js，jsx）
1）jsx(同上)
2）js(一般不用)

<body>
  <div id="test"></div>

  <!--引入react核心库-->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  
  <!--javascript-->
  <script type="text/javascript">
    //1.创建虚拟DOM      const VDOM = React.creatElement(标签名，标签属性，标签内容)
    const VDOM = React.createElement('h1',{id:'title'}, React.createElement('span',{},'hello,React'))
    //2.渲染虚拟DOM到页面      ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>
</body>

4.虚拟DOM和真实DOM
1）虚拟DOM本质是Object类型的对象；
2）虚拟DOM属性少，真实DOM属性多，因为虚拟DOM是react內部再用，不需要真实DOM那么多属性；
3）虚拟DOM最终会被react转化为真实DOM，呈现在页面上。

5.JSX语法规则
1）定义虚拟DOM不写引号

    const VDOM=(
      <h2 id="atguigu">
        <span>Hello,React</span>
      </h2>
    )
    const VDOM = <h1>Hello,React</h1>

2）标签中混入js表达式时，要用{}
一定注意区分js语句和js表达式：
①表达式会产生一个值，可以放在任何一个需要值的地方(const x=表达式)。例：a，a+b，demo(1)，arr.map()，function test(){}
②语句（代码）：if，for，switch(){case:xxx}

const myId="aTgUiGu"
const myData="Hello,React"

    const VDOM=(
      <h2 id={myId.toLowerCase()}>
        <span>{myData.toLowerCase()}</span>
      </h2>
    )

3）css类名不用class，用classname

const VDOM=(
  <h2 className="title" id={myId.toLowerCase()}>
    <span>{myData.toLowerCase()}</span>
  </h2>
)

4）内联样式要用style={{key:value}}的形式，key小驼峰形式

 <span style={{color:'white',fontSize:'30px'}}>{myData.toLowerCase()}</span>

5）虚拟DOM只能有一个根标签
6）标签必须闭合
7）标签首字母：
若小写字母开头则转为html中同名元素，若html中无该标签对应同名元素，则报错；
若大写字母开头，React就去渲染对应的组件，若组件没有定义，则报错。

6.JSX练习

动态获取数据效果图：
在这里插入图片描述
代码：

<div id="test"></div>
  <!--babel-->
  <script type="text/babel">
    const data=['Angular','React','Vue']

    //1.创建虚拟DOM
    const VDOM=(
      <div>
        <h1>前端js框架列表</h1>
        <ul>
          {
            data.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>  
      </div>
    )
    //2.渲染虚拟DOM到页面ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
  </script>