React 学习——条件渲染、遍历循环、事件绑定

React特点:

  1. 声明式的设计
  2. 高效,采用虚拟DOM来实现DOM的渲染,最大限度减少DOM的操作
  3. 灵活,跟其他库灵活搭配使用
  4. JSX,俗称JS里面写HTML,JavaScript语法的扩展
  5. 组件化,模块化,代码容易复用
  6. 单向数据流,没有实现数据的双向绑定。数据=》视图=》事件=》数据

简单的几个基础操作:(每个使用加注释了,没有单独分开)

javascript 复制代码
import {useState} from 'react'
function App() {
  // 简单条件渲染
  const [isShow,setIsShow] = useState(true);
  // 复杂条件渲染
  const articleType = 1; // 0 1 3 ,无图 单图 三图模式
  function getArticleTem(){
    if(articleType === 0){
      return <div>无图模式</div>
    }else if(articleType === 1){
      return <div>单图模式</div>
    }else{
      return <div>三图模式</div>
    }
  }

  // 遍历渲染
  let list = [
    {id:1,name:'看手机大家'},
    {id:2,name:'设计费'},
    {id:3,name:'首付款江南世家'},
    {id:4,name:'塑料袋开发'},
  ];

  //事件绑定
  const handleClick = (e,name)=>{
    console.log(e,name);
    //setIsShow(!isShow) //测试使用useState
  }

  return (
    <div className="App">
      {/* 简单条件渲染 */}
      <h3>{isShow && '你好'}</h3>
      <h3>{isShow ? '你好':'哈喽'}</h3>
      {isShow ? <h1>你好</h1>: <span>hello</span>}

      {/* 复杂的条件渲染 */}
      <div>
        {getArticleTem()}
      </div>

      {/* 遍历循环 */}
      <ul>
        {list.map((item,index)=>
          <li key={item.id}>{item.name}-{index}</li>
        )}
      </ul>
      {/* 事件绑定 */}
      <button onClick={(e)=>handleClick(e,'jia')}>按钮事件</button>

    </div>
  );
}


export default App;
相关推荐
uhakadotcom18 分钟前
Google Play SDK 接入指南:一步步轻松集成
javascript·面试·github
RaLi和夕1 小时前
单片机学习笔记8.定时器
汇编·笔记·单片机·嵌入式硬件·学习
知识中的海王2 小时前
猿人学题库第七题——请求规律检测——采坑式学习
学习
Gazer_S2 小时前
【lodash的omit函数详解 - 从入门到精通】
javascript·状态模式
DarkLONGLOVE2 小时前
解锁 JavaScript 技能:全面掌握自定义属性的奥秘
前端·javascript
顾洋洋2 小时前
WASM与OPFS组合技系列一(文件导入)
前端·javascript·webassembly
難釋懷3 小时前
JavaScript基础-navigator 对象
前端·javascript
windyrain3 小时前
用了Trae CN,原来实现从PDF提取页面如此简单
前端·react.js·trae
前端Hardy3 小时前
HTML&CSS:音乐播放器卡片
javascript·css·html
前端Hardy3 小时前
HTML&CSS:有个性的复选框
javascript·css·html