【2024官方文档版】React快速入门

系列文章目录

一、快速入门【基础】

文章目录

系列文章目录
前言
一、快速入门【基础】
- 1. 创建一个组件
- 2. 组件嵌入
- 3.添加样式
- 4.显示数据
- 5.条件渲染
- 6.渲染列表
- 7.响应事件
- 8.更新页面
- 9.使用Hook
- 10.组件间共享数据
小结：

前言

偶然翻开React的官方文档。觉得蛮有意思，总觉是入了坑
洋洋洒洒几千字，记录学习React的一段旅程
温故而知新 ^皿^

一、快速入门【基础】

在学习React之前，要学习的基础有这些：
HTML、CSS 和 JavaScript（三件套必会），ES6特性，node.js，npm/yarn(这俩现学也行，用的不深）

1. 创建一个组件

react是由组件组成的，组件小是一个按钮，大是一个页面，下面声明一个 按钮组件
注意：React是返回标签的一个js函数

function AButton(){return(<button> i am a button</button>)
}

React组件首字母必须大写！！！！HTML标签必须是小写字母
上面使用的是JSX（javascript XML）标签语法，比HTML更严格，标签必须闭合。
你创建的组件必须包裹在一个标签里面进行return，比如使用<div></div>或者空的<></>
注意return的后面是( ) 而不是{ }

2. 组件嵌入

刚刚我们声明了一个组件，将创建声明好的组件嵌入另一个写好的组件中

export default function MyApp() {return (<div><h1>Welcome to my app</h1><AButton /></div>);
}

效果如下：
在这里插入图片描述

3.添加样式

使用className，和HTML里面的class工作方式相同。css文件中编写样式再link引入即可

<img className="avater" />.avater{border-radius: 50%;
}

当你的样式需要写成变量时，可以使用如下方式：

<img style={{width:user.imgSize,height:user.imgSize
}}/>

4.显示数据

JSX可以把标签放到js代码中，而{}可以“回到”js中

className="avatar" 是将"avatar"字符串传递给 className。
src={user.imageUrl}会读取 JavaScript 的user.imageUrl变量，然后将该值作为 src 属性传递,类似于Vue中的 :src="",读取的是js表达式而不是字符串。
还可以放入更加复杂的表达式，比如拼接字符串： alt={'photo of'+user.name}

return(<h1>{user.name}<img src={user.inmUrl} className="avater" alt={'photo of'+user.name}/></h1>
)

5.条件渲染

React是没有特殊语法的，使用普通的js代码，拿if语句举个栗子
AdminPanel和LoginForm是提前写好的组件

let content
if(isLoggedIn){content = <AdminPanel />
}else{content = <LoginForm />
}return (<div>{content}</div>
);//使用条件运算符写这段代码
<div>{isLoggedIn ? (<AdminPanel />) : (<LoginForm />)}
</div>

没有else语句得话，可以使用&&

<div>{isLoggedIn && <AdminPanel />}
</div>

6.渲染列表

依赖js的特性，比如说使用for循环和array的map()渲染组件列表
举个栗子
key属性的值来源于你的数据，作为唯一标识

//使用map()函数将一个数组转化成li标签构成的列表
const arrs = [{ name: 'ruru', id: 1, hobby: '吃饭' }, { name: 'fufu', id: 2, hobby: '睡觉' }]
export default function ArrTransList() {const listItems = arrs.map(arr =><li key={arr.id}>{arr.name}-{arr.hobby}</li>);return (<ul>{listItems}</ul>);
}

7.响应事件

在组件中声明事件处理函数来响应事件
当用户点击按钮时 React 会调用你传递的事件处理函数。

//响应事件
function AButton() {function handleClick() {alert('按钮被点击了！')}
}return (//注意是传入`handleClick`,而不是直接调用事件处理的函数（没有小括号）<button onclick={handleClick}>点击就送！</button>
)

8.更新页面

数据变化，实时更新。比如一个按钮点击的次数。组件中要添加state

步骤1：引入userState
import {userState} from react;

步骤2：声明一个state变量
你将从userState钩子里获得当前的state和更新state的函数
名字随意，按照(st , setSt)这个惯例最好。

import { useState } from 'react';function AButton() {// count是当前的state,setCount是更新它的函数,0是count的初始值const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return (<button onClick={handleClick}>按钮点击了{count}次</button>)}

第一次显示按钮count为0，点击按钮react调用组件函数，count会变成1，继续点击变成2

多次渲染同一个组件，每个组件都有自己的state
注意：每个按钮都会记录自己的count，不影响其他的按钮

export default function AApp() {return (<div><h1>不同按钮的点击次数统计：</h1><AButton /><AButton /></div>)
}

在这里插入图片描述

9.使用Hook

你问我什么是Hook，以use开头的函数叫做Hook。useState就是React 提供的一个内置 Hook

可以根据现有的Hook编写属于自己的Hook
Hook比普通函数更加严格，只能在组件（或者其他Hook）的顶层调用Hook，如果想在条件或者循环语句去使用的话，最好封装一个组件在内部去使用Hook。

使用请参考官方文档提供的Hook：React内置Hook

10.组件间共享数据

前面的栗子中，两个AButton都有独立的state，点击其中一个按钮，另一个不受影响。
但如果你想实现两个按钮数据同步更新，也就是共享state时，需要将state向上移动至包含它俩的组件，也就是本例子的AApp。

import { useState } from 'react';
// 步骤3：prop信息传递，从读取父组件传递来的prop
function AButton({ count, onClick }) {return (<button onClick={onClick}>按钮点击了{count}次</button>)
}export default function AApp() {// count是当前的state,setCount是更新它的函数//步骤1.state上移到AApp中const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return (// 步骤2.将AApp中的点击处理函数和state数据向下传递到AButton中<div><h1>不同按钮的点击次数统计：</h1><AButton count={count} onClick={handleClick} /><AButton count={count} onClick={handleClick} /></div>)
}