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

大个个个个个儿2024-07-24 11:59

React特点：

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

简单的几个基础操作：（每个使用加注释了，没有单独分开）

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;