初识react - 技术栈

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

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

创建一个函数式组件：

jsx 复制代码

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

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

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

jsx 复制代码

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

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

这就是效果了

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

添加样式

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

jsx 复制代码

<img className="avater" />

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

jsx 复制代码

.avater{
	backgroud: gold
}

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

展示数据

那我们很好奇了，怎么把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>
</>)

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

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

jsx 复制代码

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

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

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

列表

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

添加事件

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

jsx 复制代码

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

更新屏幕

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

效果截图：

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

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