React入门
什么是React?
React是Facebook开源的用于构建用户界面的 JavaScript 库,通过js来控制页面DOM,整个网站只有一个HTML文件,通过js来控制页面元素的增删改查
为什么使用React?
- 组件化开发,方便复用,也是当前WEB开发趋势
- 技术成熟,社区活跃,解决方案众多,配件更加齐全
- Facebook大厂维护可靠
- 核心库使用简单,支持服务器渲染适合大部分B、C端产品
JSX/TSX
jsx是编写React组件的一种方式(tsx是在jsx中使用typescript),可以让我们在js中编写HTML,
jsx组件为函数组件和类组件,本文主讲解函数组件,在react v16.8之前函数组件是只能写静态UI的不能动态控制DOM,后来React发布了React Hooks
function componentsname() {
return (
<>
我是一个组件
>
);
}
export default componentsname;
我们定义一个函数并且导出,这就是一个简单的函数组件,此时页面显示的是一个<div>我是一个组件</div>,在jsx中所有展示的UI都需要由函数return出去,为了方便换行return一般都是添加括号,不同于Vue3,React必须有一个根组件,我们在这里可以选择用空标签代替<></>(这在React中是被允许的),很多小伙伴都要学过Vue,知道Vue有个很好用的东西叫双向绑定,在React中也为我们提供了对应的方法
import { useState, Fragment } from "react";
function componentsname() {
const [num, setNum] = useState(0);
return (
<>
我现在显示的数字是:{num}
>
);
}
export default componentsname;
打出这段代码后页面显示的应该是:我现在显示的数字是0,对于这段代码const [num, setNum] = useState(0); 很多小伙伴不是很理解
这个相当于定义了一个变量,第一个参数为变量,第二个参数为触发双向绑定的函数,useState中的参数是初始值,在jsx中也有类似Vue v-on指令的事件绑定
JSX中事件绑定
import { useState, Fragment } from "react";
function componentsname() {
const [num, setNum] = useState(0);
return (
<>
我现在显示的数字是:{num}
>
);
}
export default componentsname;
不同的是区别于Vue和原生js,jsx中事件时onEvent,小驼峰命名法,on小写事件名字首字母大写,这样每当我们点击一次按钮数字就会加1
当然只有在传递参数的时候<button onClick={() => setNum(num + 1)}></button>才会写为返回一个函数
如果触发事件不需要参数:
import { useState } from "react";
function componentsname() {
const [num, setNum] = useState(0);
function show() {
alert(`现在的数字是:${num}`)
}
return (
<>
我现在显示的数字是:{num}
>
);
}
export default componentsname;
这样编写也可以绑定事件,前提是函数不需要传递参数
JSX中条件渲染
如果想想v-if一样执行条件渲染该怎么办呢?
我现在显示的数字是:{num}
{num>4&&num大于4了}
使用js中的判断方法&&前面是判断条件后面是DOM节点,节点是肯定被转化为true的,只要前面的条件满足节点就会被显示出来,如果想要实现if...else...,可以在函数变量中使用,如果实在return的UI层使用就只能使用三元表达式,因为jsxUI层只支持表达式
import { useState } from "react";
function componentsname() {
const [num, setNum] = useState(0);
const UI = () => num > 4 && num大于4了;
return (
<>
我现在显示的数字是:{num}
{UI}
>
);
}
export default componentsname;
或者在UI中使用三元表达式
<>
我现在显示的数字是:{num}
{num>4?num大于4了:null}
>
相同的需求React中有非常多的实现方法,视开发者或者开发团队的习惯而定
JSX中循环渲染
在循环渲染中我们可以使用js自带的数组函数map
import { useState, Fragment } from "react";
function componentsname() {
const data = [
{
name: "小刘",
age: 18,
},
{
name: "小王",
age: 17,
},
{
name: "小红",
age: 11,
},
];
const UI = data.map((item, index) => {
return (
我是第{index + 1}位同学{item.name}
我今年{item.age}岁了
);
});
return <>{UI}>;//将循环渲染的DOM返回
}
export default componentsname;
这样的话就会出现3个div标签,每个div标签中有两个p标签,分别介绍自己的名字和年龄,但是在控制台式会报出错误的,和Vue一样,在虚拟DOM中节点都会有唯一一个key作为id,一遍更加方便的被React内部操作,这个Fragment也相当于<></>只不过这个标签可以绑定key直接中空标签React是不允许绑定key的
我是第{index + 1}位同学{item.name}
我今年{item.age}岁了
这下我们将key绑定到Fragment标签上,报错就会显示,页面会展示同学们的年龄和名字,在map中所有需要展示在UI层的DOM都是要return的和原生JS相同
关于React函数组件生命周期可以在这篇文章学习
编写CSS样式
因为React是一个js库,DOM是由js生成的所以在绑定class的时候我们使用的className:
我是一个红色的div
css方案推荐使用tailwind css,可以去我的页面搜索sass相关教程
有的时候我们也会编写行内css
我是一个红色的div
如果你的属性key不是一个单词(如:background-color),请将他们转为小驼峰backgroundColor,属性的value类型为字符串可以使用字符串拼接,有的小伙伴会有疑问,为什么style绑定的是两个大括号?其实问题很简单,jsx中与变量绑定的属性都是使用大括号,因为绑定的行内样式本省也是一个对象,所以外面的大括号提示这是一个jsx的绑定,里面的大括号是一个对象,记录了需要绑定的样式
function componentsname() {
const style = {
backgroundColor: "red",
color: "black",
};
return (
<>
我是一个红色的div
>
);
}
export default componentsname;
当然我们也可以使用上面的这种方式来绑定,这种方式更直观的显示出style属性其实绑定的是一个js对象
总结:
- React与Vue基本相同也是单页面应用
- 循环渲染使用js的map,将需要使用的DOM节点return出去
- 条件渲染可以使用&&判断,或者使用三元表达式执行更复杂的判断
- 事件绑定采用onEvent小驼峰命名,on小写事件名字首字母大写,如果需要传递参数使用()=>function(param)
- 绑定class请使用className,绑定行内样式使用style={样式对象}