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;
相关推荐
风吹落叶花飘荡25 分钟前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
promising-w1 小时前
【运算放大器专题】基础篇
嵌入式硬件·学习
宝山哥哥1 小时前
网络信息安全学习笔记1----------网络信息安全概述
网络·笔记·学习·安全·网络安全
前端开发与ui设计的老司机1 小时前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
yanlele1 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
X Y O1 小时前
神经网络初步学习3——数据与损失
人工智能·神经网络·学习
lichenyang4531 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6731 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴2 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子2 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js