![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React 笔记
文章平均质量分 51
React 相关知识学习与总结
蓝色清晨_
不经一番寒彻骨,怎得梅花扑鼻香。
展开
-
3.3 使用properType进行类型检查
使用 PropTypes 进行类型检查为了防止传入的数据类型错误,我们可以使用 PropTypes 进行类型检查,可以规范传入数据的类型。借用第三方库 prop-types 来解决这一问题。命令端安装:npm install --save prop-types组件内引用:import ProperTypes from "prop-types"组件内使用:import React from "react";// 引入prop-typesimport ProperTypes from "p原创 2021-07-01 18:28:07 · 235 阅读 · 0 评论 -
3.2 获取props.children的值
通过 this.props.children 获取父组件传过来的内容//Column 父组件import React, { Component } from 'react'import ColumnItem from "./ColumnItem"export default class Columns extends Component { render() { return ( <div> <Col原创 2021-07-01 18:27:30 · 641 阅读 · 0 评论 -
3.1 react的空标签
React.Fragment() 空标签React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签:render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> );}**一个常见模式是为一个组件返回原创 2021-07-01 18:26:59 · 3140 阅读 · 1 评论 -
3.0 react之props
工程化常用的通信方式:1):props父子组件消息传递2):pubsub-js概念:PubSub消息订阅与发布;安装:yarn add pubsub-js使用:1.引入:import PubSub from “pubsub-js”2.发布消息3.在ComponentDidMount中订阅消息4.在ComponentWillUnMount中取消订阅props的只读性:组件无论是使用 函数声明 还是通过 class 声明,都绝不能修改自身的 props。props 是组件定义属性的集合。原创 2021-07-01 18:26:25 · 87 阅读 · 0 评论 -
3.0 在react如何编写组件的样式
原文链接:https://blog.csdn.net/zsm4623/article/details/865932731. 使用行内样式注意点: react中规定,写行内样式时,要写在{{}}中,使用驼峰命名法render(){ return <div> {/* 第一个{}表示我们要在JSX里插入js了,第二个是对象的括号 */} <h1 style={{color:"red",fontSize:"20px"}}>使用行内样式<原创 2021-06-30 16:39:31 · 258 阅读 · 0 评论 -
16. 网络工具库
1)推荐:1.原生ajax2.fetchfetch号称是ajax的替代品,它的api是基于Promise设计的;旧版的浏览器不支持fecth,需要使用polyfill es6-promise3.axios(目前基本上各个框架都在使用)特性:从浏览器中创建XMLHttpRequest;从node.js中发出http请求;支持Promise API;拦截请求和响应;转换请求和响应数据;取消请求;自动转换json数据;客户端支持防止CSRF/XSRF支持多种请求方式:axios(config) 、ax原创 2021-06-22 09:15:11 · 78 阅读 · 0 评论 -
5.0 react之redux
我们把Flux看作一个框架理念的话,Redux是Flux的一种实现,除了Redux之外,还有很多实现Flux的框架,比如ReFlux、Fluxible等,但毫无疑问Redux获得得关注度最多,因为Redux具有很多其他框架无法比拟的优势。Redux是在Flux基础上进行改进的,在所有Flux的变体中算是最受关注的框架,没有之一。Flux的基本原则是"单向数据流",Redux在此基础上强调三个基本原则:唯一数据源(Single Source of Truth);保持状态只读(State is rea原创 2021-06-22 09:14:05 · 163 阅读 · 0 评论 -
4.0 react之state
React 把组件看成一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致。React里,只需要更新组件的 state ,然后根据新的 state 重新渲染用户界面(不需要操作DOM)。...原创 2021-06-22 09:13:37 · 75 阅读 · 0 评论 -
3.0 react之props
工程化常用的通信方式:1):props父子组件消息传递2):pubsub-js概念:PubSub消息订阅与发布;安装:yarn add pubsub-js使用:1.引入:import PubSub from “pubsub-js”2.发布消息3.在ComponentDidMount中订阅消息4.在ComponentWillUnMount中取消订阅props的只读性:组件无论是使用 函数声明 还是通过 class 声明,都绝不能修改自身的 props。props 是组件定义属性的集合。原创 2021-06-22 09:13:01 · 85 阅读 · 0 评论 -
2.2 实例演示生命周期
class Life extends React.Component{ //挂载阶段 constructor(props){ super(props); console.log("constructor()"); }; componentWillMount(){ console.log("componentWillMount()") }; ...原创 2021-06-22 09:11:57 · 60 阅读 · 0 评论 -
2.1 图解生命周期
1)前言:组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程。如果我们能够知其然且知其所以然,那么在后期多组件、中大型项目开发过程中,就能够很好的把控项目的性能细节。2)生命周期(1)图示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jijm52qT-1624266950455)(C:\Users\Administrator\Desktop\react-lift.jpg)](2)阶段划分:4个阶段1.初始化阶段2.更新阶段3.卸载阶段4.错原创 2021-06-28 15:15:21 · 72 阅读 · 0 评论 -
2.0 react生命周期
目前 React 16.8+的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。分别对应组件生命周期的三个状态:1.Mounting:已插入真实DOM;2.Updating:正在被重新渲染;3.Unmounting:已移出真实DOMReact 的生命周期的函数有哪些:组件将要挂载时触发的函数:componentWillMount组件挂载完成时触发的函数:componentDidMount是否更新数据时触发的函数:shouldComponentUpdate将要更新数据时触发的函数:comp原创 2021-06-21 17:15:38 · 133 阅读 · 0 评论 -
1.5 创建 react 组件
常用的创建 React 组件的方式有两种:1.用构造函数创建组件;2.用 class 关键字创建组件用构造函数创建的组件叫无状态组件。用 class 关键字创建的组件叫做有状态组件。有状态组件和无状态组件的本质区别是有无state属性和有无生命周期函数。使用构造函数创建组件如果需要传参,在函数中加入一个 props 参数来接收,并且必须向外界 return 一个合法的 JSX 语法创建的虚拟 DOM.//1.组件名首字母要大写 2.必须 return 合法的jsx function P原创 2021-06-21 17:15:00 · 78 阅读 · 0 评论 -
1.4 调试工具
React Developer Tools是一款由 facebook 开发的有用的Chrome 浏览器扩展,可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时,可以查看应用程序的 React 组件分层结构,而不是更加神秘的浏览器 DOM 表示。添加 react developer tools 到 chrome,是对 chrome 开发工具的 React 调试工具。React的开发工具是开源 Chrome DevTools 延伸反应的 JavaScript 库。它允许你检原创 2021-06-21 17:14:03 · 62 阅读 · 0 评论 -
1.3 本地引入 React
在本地创建一个 Html 文件,直接用浏览器打开即可。<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello World</title> <!-- 引入 react 核心库 --> <script src="https://unpkg.com/react@16/umd/react.development.原创 2021-06-21 17:13:23 · 212 阅读 · 0 评论 -
1.2 创建 react 元素
React 元素React 元素(React element),它是 React 中最小的基本单位。React 元素其实就是一个简单的 JavaScript 对象(俗称:虚拟DOM),一个 React 元素对应界面上的一部分 DOM,描述了这部分 DOM 的结构及渲染效果。React 元素不是真实的 DOM 元素,所以没办法直接调用 DOM 上的原生 API。渲染过程:React 元素 描述 虚拟DOM ,再根据 虚拟DOM 渲染出真实的DOM。虚拟DOM:就是用 js 对象结构模拟出 html原创 2021-06-21 17:12:52 · 458 阅读 · 0 评论 -
1.1 环境搭建工程化
node 安装react项目创建,需要node环境支持,如果你还没有安装node.js,请移步nodejs官网。检测是否安装成功 node -v安装最新版的 node 时,会自动安装 npm 包管理工具,检测是否安装成功 npm -v安装 create-react-app安装 create-react-app 有利于我们快速创建一个 react 应用。安装命令 npm install -g create-react-app ,检测是否安装成功 create-react-app -V使..原创 2021-06-21 17:12:20 · 50 阅读 · 0 评论 -
1.0 什么是react
React 是一个用于构建用户界面的 JavaScript 库。Vue 是一套用于构建用户界面的渐进式框架。React 的特点:React 是一个视图层框架以组件的方式进行开发使用 JSX 语法采用虚拟DOM 机制视图层框架react 是只负责显示的框架React 能把数据变成 DOM 显示出来,处理在 DOM 上触发的事件,把 DOM 事件再返回给数据react 是一个声明式的框架只需要定义数据和 DOM 的对应关系,这样数据在变换的时候,DOM 会自动变化react 是数据驱原创 2021-06-21 17:11:50 · 107 阅读 · 0 评论