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;
相关推荐
一城烟雨_18 分钟前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
一纸忘忧2 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
FAREWELL000753 小时前
C#进阶学习(十六)C#中的迭代器
开发语言·学习·c#·迭代器模式·迭代器
软件技术NINI4 小时前
html css js网页制作成品——HTML+CSS甜品店网页设计(4页)附源码
javascript·css·html
涵信4 小时前
第十一节:性能优化高频题-响应式数据深度监听问题
javascript·vue.js·性能优化
DXM05214 小时前
牟乃夏《ArcGIS Engine地理信息系统开发教程》学习笔记3-地图基本操作与实战案例
开发语言·笔记·学习·arcgis·c#·ae·arcgis engine
codingandsleeping4 小时前
Express入门
javascript·后端·node.js
Vaclee4 小时前
JavaScript-基础语法
开发语言·javascript·ecmascript
拉不动的猪5 小时前
前端常见数组分析
前端·javascript·面试
qsmyhsgcs5 小时前
Java程序员转人工智能入门学习路线图(2025版)
java·人工智能·学习·机器学习·算法工程师·人工智能入门·ai算法工程师