初识react

2026/10/3 12:05:23 拓冰建站浏览量

那我们知道，react是前端三大框架之一，而且很多大厂也在用，那么学习它是不得不的事情

https://react.dev/learn 呃这是官网网址

那么显而易见了，上面的步骤能够让我们很好的对react有一个初步的了解，那在我看来的话，上面比较突出的就是函数式编程，将html便签融合在里面，称作jsx

创建一个函数式组件：

function MyButton() {return (<button>我是一个按钮</button>)
}

注意这里是return一个组件，一定是只有一个父组件

然后这个MyButton组件可以放进其他的组件：

export default function MyApp() {return (<div><h1>欢迎使用react</h1><MyButton /></div>)
}

注意这里函数式组件一定是首字母大写的，用于区别普通的html标签

在这里插入图片描述

这就是效果了

我们是跟着官网一起走的哦，英语好的直接去看官网也可以

添加样式

那么和vue不同的是，在react里面添加样式需要用到className,就像这样：

<img className=”avater” />

然后你的css是放在其他css文件里的

.avater{backgroud: gold
}

导入css文件可以自行看相关文档，简单的是通过link标签来导入html

展示数据

那我们很好奇了，怎么把data里的数据展示出来，我这里用的是vue的说法，因为我们大多数都是先学vue2, 还没学的赶紧去看vue2,由浅入深

那它这里的话呢用的是单花括号，vue里面用的是双花括号。

return (<h3>{flower.color}</h3>
)

同样你可以在属性里面使用变量，但是不是用双引号，一样是单引号

return (<imgclassName="logo"src={url}/>
)

同样在单花括号里面我们可以使用复杂的表达式，什么加加减减呐

return (<><h3 title={1 + '2'} style={{width: '100%'}}></h3>
</>)

注意这里双花括号就是表示就是里面那个对象的意思

条件渲染，那react的条件渲染没有vue这么方便了，vue可以直接v-if, react没有提供语法糖，就是着重突出函数式编程，就是把html当成js的一部分自己拼接。看下面：

let content
if(logIn) {content = <A />
} else {content = <B />
}
return (<div>{content}
</div>
)

那这里就可以看出了，在返回出去之前，content已经判断拼接好了，这个是函数式编程

当然还有三元表达式啊，什么&&运算符啊。

列表

那我们说了渲染变量了，那怎么渲染列表呢，vue2里面用的是v-for,

ok函数式编程开始：

const arr = [{id:1, backgroud: 'green'}, {id:2, backgroud: 'yellow'} ,{id:1, backgroud: 'blue'}]
const lis = arr.map(item => 
<li key={item.id} style={{background: item.background}}>{{item.id}}
</li>)
return (
<ul>{{lis}}
</ul>
)

注意这里key,vue2和react都强调渲染性能。

添加事件

在react里面呢，事件是自己定义在函数里面的：

function MyButton() {function handleClick() {alert('点我干啥')}return (<button onClick={handleClick}>就点</button>)
}

更新屏幕

react里面的响应式数据通过使用useState方法来实现

首先，

import {useState} from 'react'

其次，定义变量count

function MyButton() {const [count, setCount] = useState(0)
}

使用：点击按钮展示点击多少次

function MyButton() {const [count, setCount] = useState(0)function clickMethod() {setCount(count + 1)}return (<button onClick={handleClick}>Click {count} times</button>)
}

使用两次一样的button组件的时候，各自的state组件互不影响：

import { useState } from 'react';export default function MyApp() {return (<div><h1>Counters that update separately</h1><MyButton /><MyButton /></div>);
}function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return (<button onClick={handleClick}>Clicked {count} times</button>);
}

效果截图：

在这里插入图片描述

使用hooks:

以use为开头的函数叫做hooks,react里面有很多内置hooks, useState就是其中一个

9.组件间分享数据：

要把数据提到他们的父组件然后向下传递

import { useState } from 'react';export default function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return (<div><h1>Counters that update together</h1><MyButton count={count} onClick={handleClick} /><MyButton count={count} onClick={handleClick} /></div>);
}function MyButton({ count, onClick }) {return (<button onClick={onClick}>Clicked {count} times</button>);
}

这样就能点一个影响另一个：

在这里插入图片描述

建站实战干货

初识react