许小墨のBlog

复习 jsx 组件 ​ 类组件 ​ 函数组件 传值有几种方式， 父–>子 父组件调用子组件里的方法 属性 子–>父 子组件调用父组件的方法 兄弟传值 EventEmitter 实例 emit 发送数据 on 接收数据 跨组件传值 context Provdier value属性 类组件 static contextType=conext this.context 就可以拿到这个值 t Consumer 函数组件 useContext Consumer 常用hook ​ useState ​ useEffect ​ useLayoutEffect ​ useRef ​ useContext ​ useMemo ​ useCallback ​ useImperativeHandle ​ useDebugValue ​ 自定义hook ​ react-router-dom ​ useLocation ​ ...

移动端适配 npm i amfe-flexible postcss-pxtorem -S amfe-flexible 用于设置根字体大小的 postcss-pxtorem 用来自动转换单位的 npm i @craco/craco -S package.json 123456"scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" }, 项目的根目录下建立 craco.config.js 1234567891011121314151617181920212223242526272829303132333435module.exports = { style: { ...

路由声明：本次使用的路由包版本是5.3.4【当前最新6.0】 1、介绍 React Router官网：https://reactrouter.com/ 使用用React Router前需要先进行安装： 1npm i react-router-dom@5 React Router现在的主版本是5，思想：一切皆组件。 2、路由的使用2.1、相关组件如前面介绍里说的，自Router 4之后的思想是一切皆组件，所以在正式开始学习React路由前需要先对几个组件要有所掌握： Router组件（别名，真实是不存在的，为了简写路由模式的组件名称）：包裹整个应用（单个具体的组件/根组件），一个React应用只需要使用一次 注意：在react中，不存在类似于vue的路由配置文件，对于前端路由模式的选择，我们可以通过该组件完成 Router类型： HashRouter和BrowserRouter HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first） BrowserRouter：使用H5的history API实现（localho ...

一、hooks1.useState作用：保存组件的状态（用于解决函数组件无状态问题） 语法： 12import React, { useState } from 'react';const [state, setstate] = useState(initialState); 案例： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475/** * hook：useState * 作用：实现函数组件中的所谓的“状态” * 提供方：react * 语法：const [访问变量名,设置数据方法名] = useState(初始默认值) * 参数含义： * 访问变量名：可以通过该变量名获取state的值 * 设置数据方法名：只能通过调用该方法修改state的值，其只接受一个参数，参数要么是直接表示其值，要么以 ...

一.props进阶1.children属性在vue中对应的是插槽Slot（匿名插槽）。 children属性表示组件标签的子节点，当组件标签有子节点时，接受传值的子组件中的props里就会有该属性，与普通的props一样，其值可以使任意类型 字符串/数组/对象…。 例如，在父组件中有如下代码： 12345678910111213import React, { Component } from "react";import Cmp from './Components/Cmp'class App extends Component { state = { content: "蚂蚁集团A股发行价确定", }; render() { return <Cmp>{this.state.content}</Cmp>; }}export defau ...

组件通信1、父组件向子组件传值 方式一: 父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变 方式二: 在子组件中定义一个方法,接受一个形参, 在父组件中调用子组件的该方法,将数据传递给子组件,通过ref属性获取子组件的实例对象,进而调用子组件上的方法 注意: 使用ref 属性只能使用在类组件上,函数组件上不能使用ref属性,报错 2、子组件向父组件传值在父组件中定义一个方法,该方法接受一个形参,父组件将该方法传递给子组件,子组件中调用父组件传递的方法,并将数据传给给方法. 3、跨组件通信（数据共享）在react没有类似vue中的事件总线来解决这个问题。在实际的项目中，当需要组件间跨级访问信息时，如果还使用组件层层传递props，此时代码显得不那么优雅，甚至有些冗余。在react中，我们还可以使用context来实现跨级父子组件间的通信。 函数组件的 使用context 实现的跨组件通信相对简单些,后面讲到函数组件说. 123456import React, { Component, createConte ...

jsx 样式 style={styleObject} className=”类名” （样式文件通过import 引入进来） BEMcss命名规范 BEM是Block（块）、Element（元素）、Modifier（修饰符）的简写 根元素只能有一个 （可以用Fragment(或<></>)包裹起来,) Fragment 是一个空标记，不会增加页面的结构和复杂性 图片引入的时候要用require 1<img src={require(图片的路径).default} /> 合成事件（事件名的首字母要大写) 123456<button onClick={()=>this.fun()}>+</button><button onClick={this.fun.bind(null)}>+</button> <button onClick={this.fun.bind(th ...

组件的生命周期挂载123456789101112131415constructor() 最早执行，状态的初始化static getDerivedStateFromProps() 更新派生状态 不常用 render() 渲染组件的内容componentDidMount() 作用: 1.拿到节点，做dom操作 2.父组件调用子组件里的方法 let bs =React.createRef(); bs.current.子组件的方法名（） //父组件调用子组件里的方法这个挂载阶段常用的钩子函数有三个 constructor,render,componentDidMount执行次序 constructor render componentDidMount 更新阶段钩子函数1234567891011static getDerivedStateFromProps()shouldComponentUpdate() 可以优化组件渲染的次数 //这个钩子函数会返回布尔值 true 组件才渲染 false 组件不渲染 shouldCo ...

jsxclass–>className style–>样式对象 事件 onXxxx string number babel 组件类组件（old) 函数组件 类组件(class component)12345678910class Counter extends React.Component{ //类组件 state={ c:1 //计数器的初始值 } render(){ //let {c:a,d=0}=this.state; //解构赋值改名，默认值 let {c}=this.state; return <div>Counter组件 {c}</div> } } 修改state的值12345678c ...

React是一个开发原生和web应用的js库 搭建react的开发环境123456789npm i react react-dom -Sreact 核心包react-dom 是web开发相关的包babel 1. es6 转es52. 解析jsx<script src="js/react.development.js"></script><script src="js/react-dom.development.js"></script><script src="js/babel.js"></script> 第一个程序1234<script type="text/babel"> //必须把类型设置 babel解析 let root = ReactDOM.createRoot(document.querySelector("#root")); root.render(<h2>hello&l ...