React学习笔记1-基础知识

文章介绍了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>

7.模块与组件、模块化和组件化
1)模块:一个js文件
2)组件:拆分,得以复用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值