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

React特点：

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

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

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;