import './App.css'
function App(){
    let a = "1"
    const fn = () => {...}
    const fn2 = (num) => {...}
    const fn2 = <T,>(num:T) => {...}//如果想要支持泛型函数需要在类型后面加一个逗号，这样就不会理解为html标签
    const cls = "text"
    const styles = {color:"red"}
    let html = `<seciton><div>我是div</div></seciton>`
              let arr = [1, 2, 3, 4]
    return(
    <>
        <div>{a}</div> //插值格式只需一个花括号
        <div onClick={fn}></div>//事件绑定使用小驼峰
        <div onClick={() => {fn2(123)}}></div>//如果需要传参使用高阶函数
        <div id={id}></div> //绑定id
        <div className={cls}></div> //绑定class
        <div className={`${cls} aaa ccc bbb`}></div> //绑定多个class
        <div style={styles}></div> //绑定style
        <div dangerouslySetInnerHTML={{__html: html}}></div> //添加html代码片段，注意标签中不能有内容
        <div>{arr.map(v => {
                return <div key={v.id}>{v}</div>
            })}</div> //遍历数组
    </>
    )
}
export default App

import { useState } from "react"
function App(){
    //constent是本次渲染的数据内容，setConstent是用来修改状态的函数
    const [constent,setConstent] = useState('默认内容')
    function handleClick (){
        setConstent('修改内容')
    }
    const [data,setData] = useState({
        title: '默认标题',
        content: '默认内容'
    })
    function handleClick (){
        setConstent('修改内容')
    }
    function handleClick1 (){
        //由于这个函数的逻辑是直接替换状态，所以要重新写一个对象,数组同理
        setConstent({
            ...data,
            content: '新内容'
        })
    }
    return(
    	<>
        	<div>{constent}</div>
        	<button onClick={handleClick}>按钮</button>
			<div>{data.content}</div>
        	<button onClick={handleClick1}>按钮</button>
        </>
    )
}