初识react

2024-01-01 17:29:55

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

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

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

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

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

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

.

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

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

在这里插入图片描述

这就是效果了

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

  1. 添加样式

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

<img className=”avater” />

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

.avater{
	backgroud: gold
}

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

  1. 展示数据

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

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

.

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

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

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

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

.

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

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

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

.

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

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

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

  1. 列表

那我们说了渲染变量了,那怎么渲染列表呢,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都强调渲染性能。

  1. 添加事件

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

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

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>
  );
}

效果截图:

在这里插入图片描述

  1. 使用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>
  );
}

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

在这里插入图片描述

文章来源:https://blog.csdn.net/qq_43246404/article/details/135326480
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。