随笔分类 - React
摘要：一、React简介 更多详细内容请移步React官网 一、介绍 React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React拥有较高的性能，代码逻辑非常简单，越来越多的人已开
阅读全文
摘要：一、StateHook 在函数组件中使用state，React.useState 1 import React from 'react' 2 3 function Demo(){ 4 const [count, setCount] = React.useState(0) 5 6 function a
阅读全文
摘要：一、Ant-Design 官网：Ant-Design、Ant-Design-Mobile 安装（PC端是antd） 1 npm i -S antd-mobile 使用：参考官网 安装customize-cra、react-app-rewired开发依赖 1 npm i -D customize-cr
阅读全文
摘要：一、路由的使用 React Router官网：https://reactrouter.com/ 安装 1 npm i -S react-router-dom 1、相关组件 Router组件：包裹整个应用（单个具体的组件/根组件），一个React应用只需要使用一次 Router类型： HashRout
阅读全文
摘要：一、Redux简介 网址：https://redux.js.org/introduction/getting-started 1、如果UI层非常简单，没有很多互动，Redux就是不必要的，用了反而增加复杂性 2、如果项目的迭代变得越来越复杂，组件的数量和层级也变得越来越多、越来越深，此时组件间的数据
阅读全文
摘要：Higher - Order Components：其实就是一个函数，传给它一个组件，它返回一个新的组件 形如： 1 const NewComponent = HOC(YourComponent) 高阶组件是强化组件的一种方式，一般是具备复用的，如果只是某个组件需要强化，则没有必要写成高阶组件的形式
阅读全文
摘要：一、axios基本属性和设置 axios文档 安装 1 npm i -S axios axios支持的请求方式 get post put：修改数据 delete：删除数据 axios响应结果的属性 config：配置信息 data：实际响应的数据 headers：响应头信息 status：响应状态码
阅读全文
摘要：一、使用步骤 安装脚手架 1 npm i -g create-react-app 创建项目 1 create-react-app 项目名称 1 #也可以不用安装create-react-app创建项目 2 npx create-react-app my-app 清理创建好的项目中不需要的文件及文件夹
阅读全文
摘要：一、说明 下面代码运行后会报错，因为在React中并不存在类似于Vue的双向数据绑定操作 1 import React, { Component } from "react"; 2 3 class App extends Component { 4 state = { 5 msg: "hello w
阅读全文
摘要：函数组件无生命周期一说 生命周期函数指在某一时刻组件会自动调用并执行的函数 React每个组件都包含生命周期方法，我们可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法 完整的生命周期图 常见生命周期图 一、新旧生命周期函数 1、旧生命周期函数 初始化阶段：由ReactDOM.render(
阅读全文
摘要：组件通信除了props（父传子）以外，还有其他方式 一、父传子（ref） 组件内的标签可以定义ref属性来标识自己 不要过度使用ref 1、字符串形式的ref 不推荐使用，已经过时，存在一些效率问题 1 import React, { Component } from "react"; 2 3 cl
阅读全文
摘要：一、children属性 children属性表示组件标签的子节点 当组件标签有子节点时，接受传值的子组件中的props里就会有该属性 与普通的props一样，其值可以是任意类型 注意 如果子组件标签里只存在一个子节点，则children属性值为一个字符串 如果子组件标签里存在多个子节点，那么chi
阅读全文
摘要：1、状态就是组件描述某种显示情况的数据，由组件自己设置和更改 2、使用状态的目的就是为了在不同的状态下使组件的显示不同 3、state状态只在class类组件才有，函数组件没有此功能 一、基本使用 状态（state）即数据，是组件自己内部的私有数据，只能在组件内部使用 state的值是对象，表示一个
阅读全文
摘要：一、事件绑定 React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同，React元素的事件绑定采用on+事件名的方式来绑定一个事件，注意，这里和原生的事件是有区别的，原生的事件全是小写，如onclick, React里的事件是驼峰，如onClick，React的事件并不是原生事件，而是
阅读全文
摘要：一、组件的概念 1、组件允许我们将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。 2、从概念上类似于JavaScript函数，它接受任意的入参（props），并返回用于描述页面展示内容的React元素（JSX） 二、组件的创建方式 1、函数组件 函数组件的特点 函数组件（无状态组件）：使
阅读全文
摘要：一、JSX概述 由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。 React使用JSX来替代常规的JavaScript，JSX可以理解为的JavaScript语法扩展，它里面的标签申明要符合XM
阅读全文
摘要：一、介绍 React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之
阅读全文
