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

系列文章目录

一、快速入门【基础】

---

前言

偶然翻开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>
    )
}

首先把State向父组件AApp移动，接着我们将state数据和事件处理函数传给AButton，AButton读取从AApp传进来的prop。
整体执行过程：点击按钮，执行handleClick，count+1。新的count传入每个按钮，展示最新值，这被称为状态提升

---

小结：

刚开始学：哈哈哈，小case
学了一天的感受：

一入React深似海，还有那么多要学
继续加油继续肝…