ReactJS
Passion is Energy
这个作者很懒,什么都没留下…
展开
-
原生图片懒加载 和 react组件封装图片懒加载
1. 原生图片懒加载<!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"> <原创 2021-09-18 14:02:18 · 425 阅读 · 0 评论 -
connect, mapStateToProps, mapDispatchToProps
1. 结构1.1 四个文件store.jsChild.jsxindex.jsApp.js1.2 两个 packagereduxreact-redux1.3 一个HOCconnect(mapStateToProps, mapDispatchToProps)(Child);接收两个参数,通过 props 传递给 Child 组件,返回一个全新的 Component2. codestore.jsimport { createStore } from "redux";原创 2021-09-18 10:46:57 · 549 阅读 · 0 评论 -
结合 useContext 和 useReducer,完成简单的共享状态
1.结构1.1 三个文件App.jsChild.jsxGrandChild.jsx1.2 两个 hooksuseReduceruseContext2. 代码App.jsimport { createContext, useReducer } from "react";import Child from "./Child";/* 定义 reducer */const initialState = { count: 0 };const myReducer = (sta原创 2021-09-18 09:42:05 · 214 阅读 · 0 评论 -
用 useRef() 去解决 react-hook ”闭包陷阱“
1. 出现问题1.1 code// jsx <h1 onClick={handleClick}>{count}</h1> <button onClick={() => setCount(count + 1)}>click {count}</button>// 状态,属性 const [count, setCount] = useState(0); const handleClick = () => { se原创 2021-09-08 10:26:12 · 500 阅读 · 0 评论 -
React-router
什么是SPA?一种Web 应用程序或网站在和用户交互的时候,用户不会跳转到其他到页面由JS实现URL转换和动态变换HTML的内容SPA应用的优点速度快,第一次下载完成静态文件,跳转不需要再次下载体验好,整个交互趋于无缝,更倾向于原生应用为前后端分离提供了时间场所(后端只要负责给前端提供数据,前端负责将数据进行处理和展示)SPA 框架emberAngularReac...原创 2020-02-28 14:10:49 · 108 阅读 · 0 评论 -
React-redux cannot replaced by React hooks,we can mix them
react redux cannot be replaced by react hooks原创 2019-09-21 08:41:36 · 181 阅读 · 0 评论 -
reducer should be immutable
Introductionreducer 必须接受pure function, i.e 不能对原来的state 进行直接修改,比如在原来的state.list.push 新元素;应该 用 解构,先把state.list copy 出来,进行添加元素,再set 给 state如果直接修改,违反了reducer 的原则,useSelector 接收到的还是未更改的state,不会re-r...原创 2019-09-18 10:47:06 · 117 阅读 · 0 评论 -
redux-immutable not found
npm install --save react-redux-immutablesudo yarn add react-redux-immutable原创 2019-09-01 14:21:13 · 293 阅读 · 0 评论 -
Where can we find icons while using ReactJS ?
React Iconsreact-fontawesome Basic installation:Using NPM:$ npm i --save @fortawesome/fontawesome-svg-core$ npm i --save @fortawesome/free-solid-svg-icons$ npm i --save @fortawesome/react...原创 2019-08-26 20:14:27 · 152 阅读 · 0 评论 -
How to import many images by Map in ReactJS from API ?
Compoenent file{ principalInvestigatorList.map((item) => ( <Box mt='0' key={item.get('pi_id')}> <CardMedia className={cardMediaStyles.media} ...原创 2019-08-25 21:03:18 · 125 阅读 · 0 评论 -
hook出现:使用react-redux 和 redux-thunk
React-redux在逻辑比较简单的时候,使用useSelector 和 useDipatch 这两个hooks去替代mapState and mapProps,并且不用connect就可以使用。在连接的function component中,不需要使用this.propsRedux-thunk为什么useState and useReducer不能取代redux-thunk? 因...原创 2019-08-14 18:38:34 · 646 阅读 · 0 评论