从0到1无比流畅的React入门教程

无比流畅的React入门教程TOC

React 是什么

简介

  • 用于构建 Web 和原生交互界面的库
  • React 用组件创建用户界面
  • 通俗来讲:是一个将数据渲染为HTML视图的开源JS库

其他信息

  • Facebook 开发,并且开源

为什么使用React?

  • 原生JS使用DOM-API修改UI代码很繁琐,效率低下,React可以解决这种问题
  • 原生JS直接操作DOM,浏览器会大量重绘重排,React可以解决这种问题
  • 原生JS没有组件化方案好用,代码复用率很低,
  • React 采用组件化模式,React 让你可以通过组件来构建用户界面
  • React 使用声明式编码
  • React 使用虚拟DOM,将数据映射成虚拟DOM,再生成真实DOM,当数据变化的时候,会对原有的虚拟DOM和新的虚拟DOM进行比较,再生成真实DOM。
  • React 使用DOM diffing 算法,最小化页面重绘

特点

声明式设计 −为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。

  • 高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
  • 灵活 −React 允许你结合其他框架或库一起使用。
  • JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
  • 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  • 单向响应的数据流 − React 采用了单向响应的数据流,使组件状态更容易维护, 组件模块化更易于快速开发。

怎么用 React?

前置条件

  • ES6
  • Class
  • js基础

文档

  • 中文文档: https://reactjs.bootcss.com/learn
  • 英文文档: https://react.dev/learn

基础知识-点击获取教程代码

基础概念了解(也可以直接跳过概念,去看下面的快速上手部分哦)

了解 Babel

  • ES6转化为ES5
  • JSX转化为JS

了解 模块与组件

模块

  • 1、理解:向外提供特定功能的js文件;
  • 2、业务逻辑增加,代码越来越多且复杂,需要拆成模块
  • 3、作用:复用js,简化js的编写,提高js运行效率;

组件

  • 1、理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等);
  • 2、为什么要用组件: 一个界面的功能更复杂,拆分成一个一个小组件,更容易复用
  • 3、作用:复用编码,简化项目编码,提高运行效率;
    模块化、组件化
    应用的js都以模块来编写-就是模块化
    应用是以多组件的方式实现-就是组件化

React开发者工具

引入依赖库,理解基础jsx语法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- React 核心库、 -->
    <script src="lib/react/react.development.js"></script>
    <!-- 操作 DOM 的 react 扩展库、 -->
    <script src="lib/react/react-dom.development.js"></script>
    <!-- 将 jsx 转为 js 的 babel 库 -->
    <script src="lib/babel.min.js"></script>
  </head>
  <body>
    <!-- 创建react解析的容器 -->
    <div id="xiaojin"></div>
    <script type="text/babel">
      var msg = "I am xiaojin!!!";
      //1.创建虚拟DOM
      const VDOM = (
        /* 此处一定不要写引号,因为不是字符串 */
        <h1 id="title">
          <span>Hello,{msg}</span>
        </h1>
      );
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("xiaojin"));
    </script>
  </body>
</html>

注释-在花括号里

ReactDOM.render(
    <div>
    {/*注释...*/}
     </div>,
    document.getElementById('XXX')
);

数组-JSX 允许在模板中插入数组,且自动展开

var arr = [
  <h1>A</h1>,
  <h1>B</h1>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('XXX')
);

组件

  • react提供两种形式创建组件,函数式组件和class形式

组件使用注意事项:

  1. 组件名必须是首字母大写

  2. 虚拟DOM元素只能有一个根元素

  3. 虚拟DOM元素必须有结束标签 < />

函数式组件

// 创建函数,返回一个虚拟DOM
function Test(props) {
    
    
  return <h1>Hello, {
    
    props.name}</h1>;
}
// 渲染
ReactDOM.Render(<Test name = "xiaojin" />,document.getElementById("div"));

class形式,这个提一下,后面就不再举例啦,之后都用函数式

  <div id="root"></div>
  <script type="text/babel">
    var msg = 'hello,world!';
    // class形式
    class HelloWorld extends React.Component {
      render(){
        console.log('this',this);
        return (
          <div>{msg}</div>
        )
      }
    }
    ReactDOM.render(<HelloWorld />,document.getElementById('root'));

组件核心属性

state
通俗理解:state就是组件的一些数据绑定,数据变了,页面就会变,这是我的理解哦

注意事项

  • 1、切勿直接修改state数据,直接state会重新渲染内容;
  • 2、通过setState修改后,不会立即修改DOM,react会在所有状态改变后,对比虚拟DOM,统一修改,提升性能;

关于this

    1. 组件中的 render 方法中的 this 为组件实例对象
    1. 组件自定义方法中由于开启了严格模式,this 指向 undefined 如何解决
    2. 通过 bind 改变 this 指向
    3. 推荐采用箭头函数,箭头函数的 this 指向

因为类式组件基本不怎么用,所以接下来只写函数式组件内容啦

props
理解

  • 1、每个组件对象都会有props(properties的简写)属性;
  • 2、组件属性保存在props中;

作用

  • 1、通过标签属性从外向组件内传递变化的数据;
  • 2、props只读

使用:

<script type="text/babel">
  function Person(props) {
    const { name, age, sex } = propsreturn(
      <ul>
        <li>姓名:{name}</li>
        <li>性别:{sex}</li>
        <li>年龄:{age}</li>
      </ul>
    );
  }
  Person.propTypes = {
    name: PropTypes.string.isRequired,
    // 限制name必传,且为字符串sex:PropTypes.string, 限制sex为字符串age:PropTypes.number, 限制age为数值
  };
  // 标签属性值
  Person.defaultProps = {
    sex: "女",
    age: 18,
  };
  ReactDOM.render(<Person name="XIAOJIN" />, document.getElementById("root"));
</script>

refs
组件内的标签可以定义ref属性来标识自己

有三种操作refs的方法,分别为:

  • 字符串形式
  • 回调形式 render(){return(
    <input ref={c => this.input1 = c } type=“text” /> 箭头函数简写,使用时可通过 this.input1来使用
  • createRef形式
    createRef step1:给DOM元素添加ref属性
<input ref={this.MyRef} type="text" placeholder="点击弹出" />
<input ref={this.MyRef1} type="text" placeholder="点击弹出" />

createRef step2:通过API,创建React的容器,会将DOM元素赋值给实例对象的名称为容器的属性的current

MyRef = React.createRef();
MyRef1 = React.createRef();
// 调用
btnOnClick = () =>{
    
    
    // 创建之后,将自身节点,传入current中
    console.log(this.MyRef.current.value);
}

事件处理

  1. React 使用自定义事件,非原生 DOM 事件

  2. React 事件通过事件委托方式处理(更高效)

  3. 可用 event.target获取 DOM 减少 refs使用

非受控租价与受控组件

包含表单元素的组件分为非受控租价与受控组件

  • 受控组件:表单组件的输入组件随着输入并将内容存储到状态中(随时更新)
  • 非受控组件:表单组件的输入组件的内容在有需求的时候才存储到状态中(即用即取)
    受控组件
  • 1、表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似;
  • 2、元素修改实时映射状态值,可对输入内容进行校验;
  • 3、只有继承React.Component才有状态;
  • 4、必须使用onChange绑定
    非受控组件
  • 1、在虚拟DOM节点上声明ref,且将引用赋值ref
  • 2、react会自动将输入的值放在实例的ref属性上

注意:官方推荐受控组件,更好的控制组件生命流程

  • 1、受控组件的两个要点:
    组件的value属性与React中的状态绑定
    组件内声明了onChange事件处理value的变化
  • 2、非受控组件更像是传统的HTML表单元素,数据存储在DOM中,而不是组件内部,获取数据的方式是通过ref引用;
  • 3、尽可能使用受控组件;
  • 4、受控组件是将状态交由React处理,可以是任何元素,不局限于表单元素;
  • 5、大量表单元素的页面,使用受控组件会使程序变得繁琐难控,此时使用非受控组件更为明智;

快速入门

我们以最快的方式先搞个DEMO项目练手

1. vscode安装appworks插件

2. 安装成功后,我们vscode左侧会出现这个图标,点击它

3. 查看右侧,选择一个干净的框架,快速创建一个react 项目

4. 输入项目名称,创建项目

5. 下载依赖,运行项目

#### 安装依赖
$ npm install

#### 启动服务
$ npm start  # visit http://localhost:3333

目录

├── build/                         # 构建产物
├── mock/                          # 本地模拟数据
│   ├── index.[j,t]s
├── public/
│   ├── index.html                 # 应用入口 HTML
│   └── favicon.png                # Favicon
├── src/                           # 源码路径
│   ├── components/                # 自定义业务组件
│   │   └── Guide/
│   │       ├── index.[j,t]sx
│   │       ├── index.module.scss
│   ├── layouts/                   # 布局组件
│   │   └── BasicLayout/
│   │       ├── index.[j,t]sx
│   │       └── index.module.scss
│   ├── pages/                     # 页面
│   │   └── Home/                  # home 页面,约定路由转成小写
│   │       ├── components/        # 页面级自定义业务组件
│   │       ├── models.[j,t]sx     # 页面级数据状态
│   │       ├── index.[j,t]sx      # 页面入口
│   │       └── index.module.scss  # 页面样式文件
│   ├── configs/                   # [可选] 配置文件
│   │   └── menu.[j,t]s            # [可选] 菜单配置
│   ├── models/                    # [可选] 应用级数据状态
│   │   └── user.[j,t]s
│   ├── utils/                     # [可选] 工具库
│   ├── global.scss                # 全局样式
│   ├── routes.[j,t]s              # 路由配置
│   └── app.[j,t]s[x]              # 应用入口脚本
├── build.json                     # 工程配置
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .stylelintignore
├── .stylelintrc.[j,t]s
├── .gitignore
└── [j,t]sconfig.json


运行项目,配置路由

创建组件文件

import * as React from 'react';

const HelloWorld = () => {
  function MyButton() {
    return <button>I'm a button</button>;
  }
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
};

export default HelloWorld;

配置路由

import { lazy } from 'ice';
import BasicLayout from '@/layouts/BasicLayout';

const Dashboard = lazy(() => import('@/pages/Dashboard'));
const HelloWorld = lazy(() => import('@/pages/HelloWorld'));
const routerConfig = [
  {
    path: '/',
    component: BasicLayout,
    children: [
      {
        path: '/HelloWorld',
        component: HelloWorld,
      },
      {
        path: '/',
        component: Dashboard,
      },
    ],
  },
];
export default routerConfig;

配置菜单

react-demo-xiaojin/src/layouts/BasicLayout/menuConfig.js

const headerMenuConfig = [];
const asideMenuConfig = [
  {
    name: 'Dashboard',
    path: '/',
    icon: 'smile',
  },
  {
    name: 'HelloWorld',
    path: '/HelloWorld',
    icon: 'smile',
  },
];
export { headerMenuConfig, asideMenuConfig };

成功展示

创建和嵌套组件(就是上面的组件案例哦)

React 应用由组件组成,React 组件是返回标签的 JavaScript 函数,就像下面这样

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

把它嵌套到另一个组件中

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

悄悄说一句:React 组件必须以大写字母开头,而 HTML 标签则必须是小写字母

添加标签和样式

编写 JSX 语法的标签

JSX简介

  • 1、全称:JavaScript XML
  • 2、react定义的一种类似于XML的JS扩展语法:JS + XML本质是React.createElement(component, props, …children)方法的语法糖
  • 3、作用:用来简化创建虚拟DOM
  • 4、写法:
var ele = <h1>Hello JSX!</h1>

基本语法规则

  • 1、定义虚拟DOM时,不要写引号;
  • 2、标签中混入JS表达式时要用{};
  • 3、样式的类名指定不要用class,要用className;
  • 4、内联样式,要用style={ {key:value}}的形式去写;
  • 5、只有一个根标签;
  • 6、标签必须闭合;
  • 7、标签首字母:

(1)小写字母开头,代表该标签转为html中同名元素
(2)大写字母开头,代表组件

JSX 标签,你必须为所有最高层级的标签添加一个共同的父标签,例如使用下面的标签作为父标签

 <div>...</div> 或 <>...</> 

举个栗子

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

如果你需要将大量 HTML 代码移植到 JSX 语法,可以使用这个在线转换器

添加样式

在 React 中,通过 className 这个属性来指定 CSS 类。它和 HTML 的 class 属性的功能是一样的:

<img className="avatar" />

然后在一个单独的 CSS 文件中为其编写 CSS 样式:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

显示数据

举个栗子:以下代码将显示 user.name 的值。

return (
  <h1>
    {user.name}
  </h1>
);

举个栗子:以下代码读取 user.imageUrl 变量的值,然后将该值作为 src 的属性进行传递

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

举个栗子:字符串拼接

悄悄告诉你:style={ {}} 是 对象被放在了 style={ } 花括号里哦

return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={
   
   {
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

条件渲染的几种方式

if 语句

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

条件运算符

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

更简短的 && 语法

<div>
  {isLoggedIn && <AdminPanel />}
</div>

列表

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];


const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

对事件做出响应并更新界面

举个栗子:处理事件代码是这样写的哦~

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

如何点击按钮后更新页面数据呢?

从useState获得:当前状态(count)和更新它的函数(setCount)。你可以给它们取任何名字,惯例是[something, setSomething]。第一次显示按钮时,count将为0,因为将0传递给了useState()。当要改变状态时,调用setCount()并将新值传递给它。单击此按钮将增加计数器, React会再次调用你的组件函数。这一次,count将是1 …

import { useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

关于Use Hooks

以use开头的函数称为Hooks。useState是React提供的一个内置钩子。你可以在React API参考中找到其他内置Hooks。您还可以通过组合现有的hook来编写自己的hook。钩子比常规函数更具限制性。你只能在组件的顶层调用Hooks(或其他Hooks)。

在组件间共享数据

举个栗子

import { useState } from 'react';

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

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} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

下面是一个浅显易懂的父子组件传参案例

父组件

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={
   
   { 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

子组件

import { getImageUrl } from './utils.js';

export default function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

工具函数

export function getImageUrl(person, size = 's') {
  return (
    'https://i.imgur.com/' +
    person.imageId +
    size +
    '.jpg'
  );
}

今天先写到这里啦~明天开始,会添加详细介绍,将会包含以下方面:

添加交互

  • 响应事件
  • State
  • 更新状态中的对象、数组

管理状态

  • 用状态响应输入
  • 选择状态结构
  • 在组件之间共享状态
  • 保存和重置状态
  • 将状态逻辑提取到一个reducer中
  • 使用上下文深入传递数据
  • 使用reducer和context进行扩展

今天就写到这里啦~

  • 小伙伴们,( ̄ω ̄( ̄ω ̄〃 ( ̄ω ̄〃)ゝ我们明天再见啦~~
  • 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境,合作共赢

在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

猜你喜欢

转载自blog.csdn.net/tangdou369098655/article/details/130717228