L01-React基础（项目+知识点总结）

最新推荐文章于 2024-11-01 15:10:26 发布
最新推荐文章于 2024-11-01 15:10:26 发布
阅读量97 收藏
点赞数
分类专栏： 前端 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42655047/article/details/120628383
版权


1_Hello World — React

 

官网文档：Hello World – React

    <div id="root"></div>

    <script type="text/babel">
      // jsx语法：react提供的语法   javascript+xml语法

      // 参数1：页面要展示的信息
      // 参数2：要渲染内容的位置
      ReactDOM.render(
        <div>Hello React!</div>,
        document.getElementById("root")
      );

    </script>

知识点：

  1. React：用于构建用户界面的 JavaScript 库。 
    最开始，很多人说React是MVC中的V，总结React就是一套为视图而准备的js框架
React由facebook打造的，致力于更快的DOM渲染和更易于维护的DOM层
  2. JSX：是一个 JavaScript 的语法扩展。 
    官方建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

2_JSX语法解析

官网文档：JSX 简介 – React

    <div id="root"></div>

    <script type="text/babel">
      /*
        jsx语法：
          遇到{}按照js语法解析
          遇到<>按照xml语法即系

          每一个列表元素需要指定一个key最为唯一元素的索引
      */

      var arr = ["iwen","ime","frank"];
      ReactDOM.render(
        <ul>
          {
            arr.map(function(item,index){
              return <li key={index}>{ item }</li>
            })
          }
        </ul>,
        document.getElementById("root")
      )

    </script>
<div id="root"></div>
    
<script type="text/babel">
      function tick(){
        var current = (
          <div>
            <h3>当前时间</h3>
            <p>{ new Date().toLocaleTimeString() }</p>
          </div>
        )
        ReactDOM.render(current,document.getElementById("root"))
      }
      
      setInterval(tick,1000);
</script>


知识点：

  1. Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。 
    React.createElement会预先执行一些检查，以帮助你编写无错代码
  2. JSX：能够防止注入攻击 
    React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。


 3_React基础组件

官网文档：组件 & Props – React

    <div id="root"></div>

    <script type="text/babel">
      /*
        组件：
          在React中，整体是一个组件化设计
          注意：组件的首字母必须大写
      */

      var Hello = React.createClass({
        render:function(){
          return(
            <div>Hello World!</div>
          )
        }
      })

      ReactDOM.render(<Hello />,document.getElementById("root"))
    </script>


知识点：

  1. CreateClass函数在v15的版本存在，v16的版本去掉了

4_React组件嵌套

官网文档：组件 & Props – React

    <div id="root"></div>

    <script type="text/babel">
      /*
        组件：
          组件中只能存在一个根容器
          组件与组件之间可以互相嵌套
          组件本身可以具有业务逻辑
      */
      var LeftNav = React.createClass({
        render:function(){
          var navArr = ["百度","谷歌","bing"]
          return(
            <div>
              <ul>
                {
                  navArr.map(function(item,index){
                    return(
                      <li key={index}><a href="#">{ item }</a></li>
                    )
                  })
                }
              </ul>
            </div>
          )
        }
      })

      var RightNav = React.createClass({
        render:function(){
          return(
            <div>
              <ul>
                <li><a href="#">新闻</a></li>
                <li><a href="#">地图</a></li>
                <li><a href="#">视频</a></li>
              </ul>
            </div>
          )
        }
      })


      var Root = React.createClass({
        render:function(){
          return(
            <div>
              <LeftNav />
              <RightNav />
            </div>
          )
        }
      })

      ReactDOM.render(<Root />,document.getElementById("root"))

    </script>

5_组件数据交互props

官网文档：组件 & Props – React

    <div id="root"></div>

    <script type="text/babel">

      /*
        组件数据交互：参数的传递
          props
          this.props.title
          组件交互中的数据传递
      */

      var Hello = React.createClass({
        render:function(){
          return(
            <div>
              { this.props.title }
              <Demo demo="你是dmeo" />
            </div>
          )
        }
      })

      var Demo = React.createClass({
        render:function(){
          return(
            <div>{ this.props.demo }</div>
          )
        }
      })

      ReactDOM.render(<Hello title="hello component" />,document.getElementById("root"))

    </script>
   <div id="root"></div>

    <script type="text/babel">

      /*
        组件：
          组件中只能存在一个根容器
          组件与组件之间可以互相嵌套
          组件本身可以具有业务逻辑
      */

      var Nav = React.createClass({
        render:function(){
          return(
            <div>
              <ul>
                {
                  this.props.navData.map(function(item,index){
                    return(
                      <li key={index}><a href="#">{ item }</a></li>
                    )
                  })
                }
              </ul>
            </div>
          )
        }
      })

      var Root = React.createClass({
        render:function(){
          var nav1 = ["百度","谷歌"]
          var nav2 = ["新闻","地图"]
          return(
            <div>
              <Nav navData={nav1}/>
              <Nav navData={nav2}/>
            </div>
          )
        }
      })

      ReactDOM.render(<Root />,document.getElementById("root"))

    </script>

 6_样式添加与事件

官网文档：事件处理 – React

  <style>
      .container{
        color: red;
      }

  </style>
  
  <body>

    <div id="root"></div>
    <script type="text/babel">

      /*
        在React中，className，class是es6的关键字，es5中同样是保留关键字
        行内样式：style={{color:'green',fontSize:"30px"}}
      */

        var Hello = React.createClass({
          render:function(){

            var styleObj = {
              color:'green',
              fontSize:"30px"
            }

            return(
              <div className="container">
                <p>哈哈</p>
                <span style={ styleObj }>hello</span>
              </div>
            )
          }
        })

        ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>

  </body>
    <div id="root"></div>
    
    <script type="text/babel">
      var Hello = React.createClass({
  
        handlerClick:function(event){
          console.log("2222");
        },
  
        render:function(){
          return(
            <div>
              <button onClick={ this.handlerClick }>按钮</button>
            </div>
          )
        }
      })
      ReactDOM.render(<Hello />,document.getElementById("root"))
      
    </script>

知识点：

  1. React DOM 使用 camelCase（小驼峰命名）来定义属性的名称。 
    因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以不使用 HTML 属性名称的命名约定。
例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。
  2. preventDefault 阻止默认行为 
    在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault

7_React state状态

官网文档：State & 生命周期 – React、事件处理 – React

    <div id="root"></div>
    
    <script type="text/babel">

      /*
        state：组件内部的状态
        props：组件之间的数据交互
      */

      var Hello = React.createClass({

        // 初始化state  getInitialState:固定的
        getInitialState:function(){
          return{
            value:"呵呵呵"
          }
        },

        changeInfo:function(event){
          this.setState({
            value:'嘿嘿嘿'
          })
        },

        render:function(){
          return(
            <div>
              <p>{ this.state.value }</p>
              <button onClick={ this.changeInfo }>按钮</button>
            </div>
          )
        }
      })

      ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>

    <div id="root"></div>
    <script type="text/babel">

      /*
        state：组件内部的状态
        props：组件之间的数据交互

        setState：引起视图的重绘

        虚拟DOM
      */

      var Hello = React.createClass({
        getInitialState:function(){
          return{
            value:true
          }
        },

        changeInfo:function(event){
          // 改变state状态
          this.setState({
            value: !this.state.value
          })
        },

        render:function(){
          var value = this.state.value;
          // 在react中，三目运算符使用非常频繁
          var info = value ? '孙悟空' : "六耳猕猴"

          return(
            <div>
              <p>{ info }</p>
              <button onClick={ this.changeInfo }>改变</button>
            </div>
          )
        }
      })

      ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>


8_State 和 Props

官网文档：State & 生命周期 – React

    <div id='root'></div>
    
    <script type="text/babel">
      /*
        state和props的应用
      */

      // 用于显示内容
      var Person = React.createClass({
        render:function(){
          var name = this.props.name;
          var age = this.props.age;
          return(
            <div>
                <h3>{ name }</h3>
                <p>{ age }</p>
            </div>
          )
        }
      })

      // 处理业务逻辑
      var User = React.createClass({
        getInitialState:function(){
          return{
            name:"iwen",
            age:20
          }
        },

        changeInfo:function(event){
          this.setState({
            name:"ime",
            age:30
          })
        },

        render:function(){
          return(
            <div>
              <Person name={this.state.name} age={this.state.age} />
              <button onClick={ this.changeInfo }>按钮</button>
            </div>
          )
        }
      })

      ReactDOM.render(<User />,document.getElementById("root"))

    </script>
  1. State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件

9_组件生命周期函数

官网文档：State & 生命周期 – React

    <div id="root"></div>

    <script type="text/babel">

      /*
        组件(component)的生命周期！
          componentWillMount:组件渲染之前
          componentDidMount:组件渲染之后
          componentWillUnMount:组件卸载之前
          shouldComponentUpdate:状态改变之后执行
          componentWillUpdate:组件即将更新
          componentDidUpdate:组件更新之后
          componentWillReceiveProps:props改变之后执行

      */

      var MyComponent = React.createClass({

        // 初始化props
        getDefaultProps:function(){

        },

        // 初始化state
        getInitialState:function(){
          return{
            value:"孙悟空"
          }
        },

        componentWillMount:function(){
          console.log("组件渲染之前");
        },

        componentDidMount:function(){
          console.log("组件渲染之后");
        },
        componentWillUnMount:function(){
          console.log("组件卸载之前");
        },
        shouldComponentUpdate:function(){
          console.log("state改变之前");
          return true;
        },
        componentWillUpdate:function(){
          console.log("组件state更新之前");
        },
        componentDidUpdate:function(){
          console.log("组件state更新之后");
        },
        componentWillReceiveProps:function(){

        },

        changeInfo:function(){
          this.setState({
            value:"妖猴，休走！"
          })
        },

        // 渲染
        render:function(){
          return(
            <div>
              <p>{ this.state.value }</p>
              <button onClick={this.changeInfo}>按钮</button>
            </div>
          )
        }
      })

      ReactDOM.render(<MyComponent />,document.getElementById("root"))

    </script>

10_组件声明周期函数应用

官网文档：State & 生命周期 – React

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="dist/browser.min.js"></script>
    <script src="dist/jquery.js"></script>
    <script src="dist/react.js"></script>
    <script src="dist/react-dom.js"></script>
    <style media="screen">
      .img{
        width: 300px;
      }
    </style>
  </head>
  <body>

    <div id="root"></div>

    <script type="text/babel">

      var Hello = React.createClass({

        getInitialState:function(){
          return{
            info:[{
              title:"",
              content:"",
              img:""
            }]
          }
        },

        // 在生命周期函数中读取数据
        // 在渲染完成之后执行数据加载
        componentDidMount:function(){
          $.ajax({
            type:"get",
            url:"http://www.wwtliu.com/sxtstu/blueberrypai/getIndexBanner.php",
            success:function(data){
              // info  修改state
              this.setState({
                info:data.banner
              })
            }.bind(this)
          })
        },

        render:function(){
          return(
            <div>
              <ul>
                {
                  this.state.info.map(function(item,index){
                    return (
                      <li key={index}>
                        <h3>{ item.title }</h3>
                        <p>{ item.content }</p>
                        <img className="img" src={item.img} />
                      </li>
                    )
                  })
                }
              </ul>
            </div>
          )
        }
      })

      ReactDOM.render(<Hello />,document.getElementById("root"))

    </script>

  </body>
</html>
平平无奇的猫
关注
专栏目录
两个Arduino nano + nRF24L01实现双向通信
perseverance51博客
01-15 4161
两个Arduino nano + nRF24L01实现双向通信 在网上看了好多教程，接收双向通讯的比较少，之前一段时间只研究了单向通讯的应用案例，这次带来双向通讯的成功案例和原代码。 一号Arduino nano + nRF24L01： /*一号机8 */ #include <SPI.h> #include <nRF24L01.h> #include <RF24.h> RF24 radio(7, 8);// CE, CSN #define LedPin 5 //LE
勤思l01-8笔记知识点.rar
11-15
【压缩包子文件的文件名称列表】：“L0勤思知识点总结”是压缩包中的一个文件，这可能是一个文档，详细列举了L01-8阶段的所有关键知识点，包括定义、解释、示例以及相关练习。通过阅读这份总结，学习者可以快速回顾...
React基础知识 [ 新手上路学这一篇就够了 ]
初辰的博客
05-24 1922
一、什么是React？ React是一个用于构建用户界面的javaScript库，起源于facebook的内部项目，后续在13年开源了出来 1.特点 声明式：只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI 基于组件：组件是React最重要的内容，组件表示页面中的部分内容 适用范围广：使用React可以开发Web应用，使用React可以开发移动端，可以开发VR应用 2.React基本使用 新建挂载点 <div id="root"></div> Reac
nRF24L01/nRF24L01+应用总结
LeoPrince0314的博客
04-27 1055
　　nRF24L01+是nRF24L01的升级款，比较显眼的区别是nRF24L01+比nRF24L01多了一个250Kbps传输速率。其它的还有接收模式官方给的耗电量是不一样的。个别寄存器名字不一样。 　　接收模式下，我们打开接收完成中断。可以在中断中读出收到的数据；并清除中断标志位。 　　发送模式下，我们打开发送完成中断和发送失败中断。发送完成中断很好处理，我们只需要清除一下中断标...
2020年最后一个项目部分过程记录--红外遥控解码+摄像头+LVGL+NRF24L01...综合开发板
weixin_44495772的博客
01-01 951
以下内容来源于OneNote
NRF24L01-状态寄存器
ai5945fei的博客
12-17 1656
STATUS寄存器 当接受到数据后BIT_RX_DR置1，并且RX_P_NO 设置为对应接收通道。 当读取出接收缓冲区数据后，RX_P_NO 变为111，但BIT_RX_DR不变，需手动清除。 BIT_RX_DR可以不清除，只需要把数据读出就可以再次接收。即使BIT_RX_DR清除，RX_P_NO和数据依然有效。 所以，为了防止标志位BIT_RX_DR手动清除的延时问题，可以不关心BIT_RX_DR，只判断RX_P_NO，当他小于6时，说明有数据，读出自动清除RX_P_NO。 FI..
L01-神经网络-1：Bp算法
zhangqa123的博客
10-01 360
BP 算法的思想非常简单：根据网络的输出与正确答案之间的误差，不断调整网络的参数。
nRF24L01+如何检测信道被占用-RSSI寄存器实战分享
IT技术实战
06-08 4806
nRF24L01+如何检测信道被占用-RSSI寄存器实战分享检测信道占用的需求场景在nRF24L01+中怎样知道信道被占用了为什么用循环等待，有时候会死循环（一直返回1） 检测信道占用的需求场景 在使用nRF24L01模块做一对多或多对一的组网通信中，大家都会担心一个问题就是在发送的时候，希望不要有其他的模块也进行发送，因为这样就会使无线信号发生碰撞，信道被堵塞，造成通信失败。 为了避免这种情况发...
pl/sql---创建表+修改表
chen_zan_yu_的博客
04-25 1586
一，命名规则 二，CREATE TABLE语句 01，命令语句： 三，数据类型 四，修改表 五，ALTER TEBLE 语句 六，修改一个列 l01，命令语句 增加一列： 修改长度： 修改默认值：(default是默认值) 删除一个列： 重命名一个列： 七，删除表 八，清空表 九，改变对...
NRF24L01调试过程遇到得问题+经验总结
P13643822101的博客
04-05 1486
"NRF24L01 Error"检测不到模块存在
24L01.rar_24L01 PCB_24l01-protel_NRF24L01+PCB_nrf24l01 PCB文件_pcb
07-14
标题中的“24L01.rar_24L01 PCB_24l01-protel_NRF24L01+PCB_nrf24l01 PCB文件_pcb”表明这是一个关于NRF24L01无线收发模块的PCB设计文件集合，其中可能包括了电路原理图、布局布线图以及相关的工程文件。NRF24L01是...
STM32+NRF24L01无线通信使用教程+源码+资料
05-09
STM32+NRF24L01无线通信使用教程+源码+资料 STM32+NRF24L01无线通信使用教程+源码+资料 STM32+NRF24L01无线通信使用教程+源码+资料 STM32+NRF24L01无线通信使用教程+源码+资料 STM32+NRF24L01无线通信使用教程+...
物联网项目实战开发之基于STM32的NRF24L01无线接收+发送+中继代码程序(硬件SPI)
05-06
单片机通过SPI跟NRF24L01通讯，nRF24L01发送+中继+接收端程序： 1、将nRF24L01模块按照正确方向插到PB0/PB12/PB13/PB14/PB15/PB1上; 2、需要至少三个模块，分别为发送、中继、接收端。 3、下载程序后,开发板蓝色指示...
nrf24l01-board-support
02-06
"nrf24l01-board-support"项目主要关注的是如何为nRF24L01提供硬件和软件的支持，以便在实际应用中实现稳定可靠的无线通讯功能。 一、nRF24L01芯片特性 1. **工作频段**：nRF24L01工作在2.4GHz ISM（工业、科学、...
5、reactive
weixin_37306719的博客
10-31 329
reactiveObject.assign`去整体替换）。
React面试常见题目（基础-进阶）
警警的博客
10-30 1310
React是一个用于构建用户界面的JavaScript库，它允许你将UI拆分成可复用的组件。React起源于Facebook的内部项目，用于构建高性能的Web应用界面。
Vue中ref、reactive、toRef、toRefs的区别
weixin_40992252的博客
11-01 410
更新响应式数据的时候不更新界面，就可以使用toRefs，用于批量设置多个数据为响应式数据。函数中默认定义的变量并不是响应式的（即数据变了以后页面不会跟着变），如果想。toRef当数据发生改变时，界面不会自动更新。二、toRef、toRefs。
React v19 革新功能：2024 年需要了解的所有信息
粉丝们务必加入微信粉丝群
11-01 695
React作为现代Web开发的核心框架之一，一直在不断创新和进步。前段时间发布的React 19版本带来了一系列令人兴奋的新特性和改进，这些变化将显著提升开发效率、应用性能和开发体验。本文再次回顾一下React 19的关键特性(复习)，以及它们如何改变前端开发的格局。1. React服务器组件（RSC）React服务器组件是此次更新的一大亮点。它允许组件在构建时或每次请求时在服务器端渲染，从而减轻...
react的antd-mobile使用Steps显示物流
最新发布
小元子
11-01 292
antd-mobile的图标，是需要安装依赖的step如果只有一个步骤是不会展示的，代码里面的标题那块可以看出来尝试了很多遍测试发现就算你只展示一个那么也要写两个，第二个去样式里面给隐藏就可以或者直接改组件的代码，因为他本身逻辑或者样式做了处理，一个步骤条不展示（我懒的去，所以直接写两个隐藏了一个）
nRF24L01+无线USB数传模块操作指南
在实际应用中，nRF24L01+模块通常被用于物联网项目、智能家居设备、遥控玩具以及任何需要无线通信的场景。其免驱动的USB-HID接口简化了设备的连接和使用，而互联网访问模式则进一步增强了其远程控制能力。通过了解和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值