登录/注册

React入门

用户头像管理员55阅读

什么是React?

React是Facebook开源的用于构建用户界面的 JavaScript 库,通过js来控制页面DOM,整个网站只有一个HTML文件,通过js来控制页面元素的增删改查

为什么使用React?

  1. 组件化开发,方便复用,也是当前WEB开发趋势
  2. 技术成熟,社区活跃,解决方案众多,配件更加齐全
  3. Facebook大厂维护可靠
  4. 核心库使用简单,支持服务器渲染适合大部分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对象

总结:

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