React入门

站长

2021年07月02日 00:00 · 阅读数 505

什么是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 (
    <>
      <div>我是一个组件</div>
    </>
  );
}
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 (
    <>
      <div>我现在显示的数字是:{num}</div>
    </>
  );
}
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 (
    <>
      <div>我现在显示的数字是:{num}</div>
      <button onClick={() => setNum(num+1)}></button>
    </>
  );
}
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 (
    <>
      <div>我现在显示的数字是:{num}</div>
      <button onClick={show}></button>
    </>
  );
}
export default componentsname;

这样编写也可以绑定事件，前提是函数不需要传递参数

JSX中条件渲染

如果想想v-if一样执行条件渲染该怎么办呢？

<div>我现在显示的数字是:{num}</div>
   {num>4&&<div>num大于4了</div>}
<button onClick={() => setNum(num+1)}></button>

使用js中的判断方法&&前面是判断条件后面是DOM节点，节点是肯定被转化为true的，只要前面的条件满足节点就会被显示出来，如果想要实现if...else...，可以在函数变量中使用，如果实在return的UI层使用就只能使用三元表达式，因为jsxUI层只支持表达式

import { useState } from "react";
function componentsname() {
  const [num, setNum] = useState(0);
  const UI = () => num > 4 && <div>num大于4了</div>;
  return (
    <>
      <div>我现在显示的数字是:{num}</div>
      {UI}
      <button onClick={() => setNum(num + 1)}></button>
    </>
  );
}
export default componentsname;

或者在UI中使用三元表达式

<>
   <div>我现在显示的数字是:{num}</div>
    {num>4?<div>num大于4了</div>:null}
   <button onClick={() => setNum(num + 1)}></button>
</>

相同的需求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 (
      <Fragment>
        <p>
          我是第{index + 1}位同学{item.name}
        </p>
        <p>我今年{item.age}岁了</p>
      </Fragment>
    );
  });
 return <>{UI}</>;//将循环渲染的DOM返回
}
export default componentsname;

这样的话就会出现3个div标签，每个div标签中有两个p标签，分别介绍自己的名字和年龄，但是在控制台式会报出错误的，和Vue一样，在虚拟DOM中节点都会有唯一一个key作为id，一遍更加方便的被React内部操作，这个Fragment也相当于<></>只不过这个标签可以绑定key直接中空标签React是不允许绑定key的

<Fragment key={item.name}>
   <p>
     我是第{index + 1}位同学{item.name}
   </p>
   <p>我今年{item.age}岁了</p>
</Fragment>

这下我们将key绑定到Fragment标签上，报错就会显示，页面会展示同学们的年龄和名字，在map中所有需要展示在UI层的DOM都是要return的和原生JS相同

关于React函数组件生命周期可以在这篇文章学习

编写CSS样式

因为React是一个js库，DOM是由js生成的所以在绑定class的时候我们使用的className：

<div className="classname">我是一个红色的div</div>

css方案推荐使用tailwind css，可以去我的页面搜索sass相关教程

有的时候我们也会编写行内css

 <div style={{backgroundColor:'red'}}>我是一个红色的div</div>

如果你的属性key不是一个单词（如：background-color），请将他们转为小驼峰backgroundColor，属性的value类型为字符串可以使用字符串拼接，有的小伙伴会有疑问，为什么style绑定的是两个大括号？其实问题很简单，jsx中与变量绑定的属性都是使用大括号，因为绑定的行内样式本省也是一个对象，所以外面的大括号提示这是一个jsx的绑定，里面的大括号是一个对象，记录了需要绑定的样式

function componentsname() {
  const style = {
    backgroundColor: "red",
    color: "black",
  };
  return (
    <>
      <div style={style}>我是一个红色的div</div>
    </>
  );
}
export default componentsname;

当然我们也可以使用上面的这种方式来绑定，这种方式更直观的显示出style属性其实绑定的是一个js对象

总结：

React与Vue基本相同也是单页面应用
循环渲染使用js的map，将需要使用的DOM节点return出去
条件渲染可以使用&&判断，或者使用三元表达式执行更复杂的判断
事件绑定采用onEvent小驼峰命名，on小写事件名字首字母大写，如果需要传递参数使用()=>function(param)
绑定class请使用className，绑定行内样式使用style={样式对象}