React官方文档【学习笔记】——快速入门

学习React

React组件是返回标签的JavaScript函数

注：React组件必须以大写字母开头，而HTML标签必须小写

React应用的两种创建方式

jsx格式 只允许一个共享的父级元素

function HomeComponent(){
    return <div>这里是HomeComponent组件</div>
}
export default HomeComponent

把HomeComponent组件嵌套在MyApp中

import HomeComponent from './HomeComponent.js
function MyApp(){
    return <>
        <div>MyApp</div>
        <HomeComponent/>
    </>
}
export default MyApp

添加样式

import './index.css'
const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};
function About(){
    let flag = true
    let flag1 = true
    let content = undefine
    if(flag1){
        content = <A/>
    }else{
        content = <B/>
    }
    return <>
        <img className="avatar" 
             src={user.imageUrl}
             alt={'Photo of ' + user.name}
             style={{
                 width:user.imageSize,
                 height:user.imageSize
             }}
             />
          {/* 条件渲染 */}
          <div>{content}</div>
          {/* 逻辑与 */}
          {flag&&<h1>flag is true</h1>}
          {/* 条件?表达式 */}
          {flag1?(<A/>):(<B/>)}
    </>
}
export default About

css文件

.avatar {  
    border-radius: 50%;  
}

循环渲染

const products = [  
{ title: 'Cabbage', id: 1 },  
{ title: 'Garlic', id: 2 },  
{ title: 'Apple', id: 3 },  
];
function A(){
const listItem = products.map((item)=><li key={item.id}>
            {item.id}---{item.title}
        </li>)
    return <>
        <div>这里是A组件</div>
        <ul>
            {listItem}
        </ul>
    </>
}
export default A

事件响应

const products = [  
{ title: 'Cabbage', id: 1 },  
{ title: 'Garlic', id: 2 },  
{ title: 'Apple', id: 3 },  
];
function MyButton(){
    const handleClick = () =>{
        alert('点击了！')
    }
    return <>
        <button onClick={handleClick}>点击</button>
    </>
}
export default MyButton

更新页面

import { useState } from 'react';//钩子函数
function Counter(props){
    const [count,setCount] = useState(0)
    //useState:1.获取当前state(count),以及更新的方法setCount
   
   const handleDel = () =>{
        setCount(count-1)
        setCount((prev)=>prev-1)
    }
    const handleAdd = () =>{
        setCount(count+1)
        setCount((prev)=>prev+1)
    }
    return <>
        <button onClick={handleDel}>-1</button>
        <div>{count}</div>
        <button onClick={handleAdd}>+1</button>
    </>
}
export default Counter

以 use 开头的函数被称为 Hook

Hook只能在组件的顶层中使用，如果需要在条件或循环中使用，需要提取一个新的组件在组件内部使用hook