列表渲染
const list = [
{name:"vue",id:1},
{name:"reacr",id:2},
{name:"angular",id:3}
]
//渲染
<ul>
{list.map(item=><li key=item.id>{item.name}</li>)}
</ul>
js表达式
//引号传递字符串
{"this is message"}
//识别变量
{count}
//调用函数
{getcount()}
//使用js对象
<div style={{color="red"}}>this is div</div>
基础条件渲染
const isloading = false
const app = ()=>{
return (
//逻辑与
{isloading && <span>Luojiyu</span>}
//三元运算
{isloading ? <span>成功渲染</span> : <span>isloading=false</span>}
)
}
绑定点击事件
<div>
<button onClick={事件名}></button>
</div>
传递自定义参数
使用redux存储数据
模板:计数器案例