React + TS 学习笔记

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