React是用于构建用户界面的JavaScript库,[1] 起源于Facebook的内部项目,
1.声明式设计:React 使创建交互式 UI 变得轻而易举。为应用的每一个状态设计简洁的视图,当数据变动时 React能高效更新并渲染合适的组件。
2.组件化: 构建管理自身状态的封装组件,然后对其组合以构成复杂的 UI。
3.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
4.灵活:无论使用什么技术栈,在无需重写现有代码的前提下,通过引入React来开发新功能。
1,条件渲染
JSX方式
import React, { useState } from 'react'
export default function demo() {
// const Loading = false
const [Loading, setCollapsed] = useState(false);
const loadingData = ()=>{
if(Loading){
return <div> 数据加载中。。。 </div>
}
else{
return <div> 数据加载完成,稍后显示 </div>
}
}
const loadingDataTo = Loading? <div> 数据加载中。。。 </div>:<div> 数据加载完成,稍后显示 </div>
const btnclick = () => {
setCollapsed(Loading => !Loading)
}
return (
<div>
<div>
if渲染:{loadingData()}
</div>
<div>
三元渲染:{loadingDataTo}
</div>
<button onClick={btnclick} > 切换</button>
</div>
)
}
TSX方式
import React, { useState } from 'react'
const demo: React.FC = () => {
const [Loading, setCollapsed] = useState(false);
const loadingData = ()=>{
if(Loading){
return <div> 数据加载中。。。 </div>
}
else{
return <div> 数据加载完成,稍后显示 </div>
}
}
const loadingDataTo = Loading? <div> 数据加载中。。。 </div>:<div> 数据加载完成,稍后显示 </div>
const btnclick = () => {
setCollapsed(Loading => !Loading)
}
return (
<div>
<div>
if渲染:{loadingData()}
</div>
<div>
三元渲染:{loadingDataTo}
</div>
<button onClick={btnclick} > 切换</button>
</div>
)
}
export default demo;
2,列表渲染
JSX方式
import React from 'react'
export default function demo() {
const ListObjietArr = [
{name:"王",age:23},
{name:"王",age:22},
{name:"王",age:25}
]
return (
<div>
{
ListObjietArr.map((item,index) => {
return (
<div key={index}>
<span>{item.name}--{item.age}</span>
</div>
)
})
}
</div>
)
}
TSX方式
import React, { useState } from 'react'
type Coordinates = {
name:string;
age: number;
};
const demo: React.FC = () => {
const [ListArr, setListArr] = useState([1,2,3]);
const [ListObjietArr, setListObjietArr] = useState<Coordinates[]>([
{name:"王",age:23},
{name:"王",age:22},
{name:"王",age:25}
]);
const btnArrclick = ()=>{
let num = Math.random()
num = num * 100
num = Math.floor(num)
ListArr.push(num)
setListArr([...ListArr])
}
const btnObclick = ()=>{
ListObjietArr.push({name:"陈",age:25})
setListObjietArr([...ListObjietArr])
}
const depbtnArrclick = (index:number)=>{
ListArr.splice(index, 1)
setListArr([...ListArr])
}
const depbtnObclick = (index:number)=>{
ListObjietArr.splice(index, 1)
setListObjietArr([...ListObjietArr])
}
return (
<div>
<div>
渲染数组对象:
{
ListObjietArr.map((item, index) => {
return (
<div key={index}>
<span >{item.name}-{item.age}-{index}</span>
<button onClick={()=>depbtnObclick(index)} > 删除</button>
</div>
)
})
}
<button onClick={btnObclick} > 新增</button>
</div>
<div>
渲染数组:
{
ListArr.map((item,index) => {
return (
<div key={index}>
<span>{item}</span>
<button onClick={()=>depbtnArrclick(index)} >删除</button>
</div>
)
})
}
</div>
<button onClick={btnArrclick} > 新增</button>
</div>
);
}
export default demo