初识react

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

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

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

  1. 创建一个函数式组件:
jsx 复制代码
function MyButton() {
	return (
		<button>我是一个按钮</button>
	)
}

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

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

.

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

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

这就是效果了

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

  1. 添加样式

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

jsx 复制代码
<img className="avater" />

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

jsx 复制代码
.avater{
	backgroud: gold
}

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

  1. 展示数据

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

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

.

jsx 复制代码
return (
	<h3>
		{flower.color}
	</h3>
)

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

jsx 复制代码
return (
	<img
		className="logo"
		src={url}
	/>
)

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

.

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

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

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

.

jsx 复制代码
let content
if(logIn) {
	content = <A />
} else {
	content = <B />
}
return (
	<div>
		{content}
</div>
)

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

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

  1. 列表

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

ok函数式编程开始:

jsx 复制代码
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都强调渲染性能。

  1. 添加事件

在react里面呢,事件是自己定义在函数里面的:

jsx 复制代码
function MyButton() {
	function handleClick() {
		alert('点我干啥')
	}
	return (
		<button onClick={handleClick}>就点</button>
	)
}
  1. 更新屏幕

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

首先,

jsx 复制代码
import {useState} from 'react'

其次,定义变量count

jsx 复制代码
function MyButton() {
	const [count, setCount] = useState(0)
}

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

jsx 复制代码
function MyButton() {
	const [count, setCount] = useState(0)

	function clickMethod() {
		setCount(count + 1)
	}

	return (
		<button onClick={handleClick}>
				Click {count} times
		</button>
	)
}

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

jsx 复制代码
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>
  );
}

效果截图:

  1. 使用hooks:

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

9.组件间分享数据:

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

jsx 复制代码
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>
  );
}

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

相关推荐
独立开阀者_FwtCoder6 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士7 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明7 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端
Kevin在掘金9201412 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius13 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku14 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄18 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙19 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员21 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特22 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范