随笔分类 - react
摘要：react 常用的hooks 有哪些？ useState：用于在函数组件中添加和管理状态。 import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0)
阅读全文
摘要：useEffect useEffect可以帮助我们在DOM更新完成后执行某些副作用操作，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等 有了useEffect，我们可以在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情,具有: componentDidMount com
阅读全文
摘要：何时使用 ref 通常，当你的组件需要“跳出” React 并与外部 API 通信时，你会用到 ref —— 通常是不会影响组件外观的浏览器 API。以下是这些罕见情况中的几个： 存储 timeout ID 存储和操作 DOM 元素 存储不需要被用来计算 JSX 的其他对象。 如果你的组件需要存储一
阅读全文
摘要：结构化状态的原则 当您编写一个保存某些状态的组件时，您必须选择使用多少个状态变量以及它们的数据应该是什么形状。虽然即使使用次优状态结构也可以编写正确的程序，但有一些原则可以指导您做出更好的选择： 1.组相关状态。如果您总是同时更新两个或多个状态变量，请考虑将它们合并为一个状态变量。 2.避免状态上的
阅读全文
摘要：State 可以保存任何类型的 JavaScript 值，包括对象。但是你不应该直接改变你在 React 状态下持有的对象。相反，当你想更新一个对象时，你需要创建一个新对象（或复制一个现有对象），然后设置状态以使用该副本。 const [position, setPosition] = useSta
阅读全文
摘要：组件显示到屏幕之前，其必须被 React 渲染。 在您触发渲染后，React 会调用您的组件来确定要在屏幕上显示的内容。“渲染中” 即 React 在调用您的组件。 在进行初次渲染时, React 会调用根组件。 对于后续的渲染, React 会调用内部状态更新触发了渲染的函数组件。 这个过程是递归
阅读全文
摘要：由于一开始钱包的连接使用的是ethers库，它兼容一般的钱包连接MetaMask bitkeep 等。后来没有单独使用其他的连接方式，使用了metaMask原有的方式连接trustWallet钱包。惊奇的发现能连接上，以为能使用原有的方法，但是在手机端的Dapp上连接签名是正常的，签名的时候也能吊起
阅读全文
摘要：1.首先在本地运行时会有两个情况在浏览器中打开一种就是使用ip访问本地项目，一种是使用localhost 本地主机去访问。当你用ip去访问的话你在链接钱包时，钱包一会一直处于加载中的状态，有的可能没有反应。 这可不是你的网络不好或者FQ导致的，而是walletConnet库在使用ip请求https的
阅读全文
摘要：1.setState更新状态的两种写法： (1). setState(stateChange, [callback]) 对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(rende
阅读全文
摘要：理解：react-Redux将所有组件分成两大类 · UI组件 1）只负责UI的呈现，不带有任何的业务逻辑 2）通过props接收数据（一般数据和函数） 3）不使用任何Redux的API ·容器组件 1）负责管理数据和业务逻辑，不负责UI的呈现 2) 使用Redux的API 3）一般保存在conta
阅读全文
摘要：直接拖到谷歌浏览器中添加扩展程序 但是在使用 redux-devtools-extension 工具可以看到相应的store参数时需要代码设计 在store.js文件中 //首先安装npm i redux-devtools-extension // 引入reducx-devtools-extensi
阅读全文
摘要：首先区别redux和react-reduex,redux是一个单独的模块，在其他框架中也能使用，而react-redux是为react管理数据而生。 Redux 的设计思想很简单，就两句话。 （1）Web 应用是一个状态机，视图与状态是一一对应的。 （2）所有的状态，保存在一个对象里面。 redux
阅读全文
摘要：传递参数的跳转页面 import React, { Component } from 'react' import {Route} from 'react-router-dom' import Detail from './Detail' export default class Message e
阅读全文
摘要：1.工具库：PubSubJS 2.下载：npm i pubsub-js --save 3.使用： 1） import PubSub from 'pubsub-js' //引入 2） PubSub.publish('atguigu',{isFirst:false,isLoading:true}) //
阅读全文
摘要：首先在src文件下创建setupProxy.js文件，和App.js同一级，例如： const { createProxyMiddleware } = require('http-proxy-middleware'); //更新后使用的是createProxyMiddleware，以前使用的是pro
阅读全文
摘要：不传参数时候 函数定义成箭头函数直接使用 render () { return ( <div> <h4>请发表你的看法</h4> <div className ="flex"> <Add addItemFun={this.addItemFun}/> <Lists commentList={this.
阅读全文
摘要：react生命周期16.0前的生命周期 首次进去页面执行的生命周期钩子函数有：（初始化阶段和挂载阶段） 1.constructor （初始化数据，也可以super(props) 调用基类的构造方法 props只读不可变，state可变） 2.componentWillMount （ 在组件挂载到DO
阅读全文
摘要：函数组件 //1.创建函数式组件 function MyComponent(){ console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } //2.渲染组件到
阅读全文
摘要：文档上卷的距离+窗口的高度=文档的距离 就可以说到底了 但是我们往往在还未到低时候就开始加载下一页 //添加窗口滚动事件 window.onscroll = () => { //上卷距离 let st = document.documentElement.scrollTop || document.
阅读全文
摘要：在路由组件page里面定义一个文件夹，文件夹后面定义一个路由组件 MyRoute代码如下 import React, { Component } from 'react' import {Redirect,Route} from "react-router-dom" export default c
阅读全文
