react

摘要 　　 在开发项目中时常有点击跳转滚动到锚点的需求，最简单的锚点定位就是给一个a标签，a标签的href = ‘#锚点’，然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式，在React中使用useRef来实现跳转锚点的功能。 功能具体步骤 1、创建空的Ref 　　 import React, { useRef } from 'react'; const Layout = () => { const pageTopRef = useRef(null); const sectionEventInfoRef = useRef(null); return ( <div>滚动内容</div> ) } export default Layout; 2、跳转锚点函数 　　 Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。我们可以利用该方法搭配Ref实现跳转锚点的功能，behavior属性可以定义动画过渡效果，跳转锚点时滚动效果平滑些。具体代码代码如下： // 点击导航按钮，滚动到页面中相对应的区域 const handleClickNavItem = ref => { setIsWork(false); if (ref.current) { ref.current.scrollIntoView({ behavior:

背景 webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理。让我们尝试从一个最简单的webpack配置入手，从工具设计者的角度开发一款低配版的webpack。 开发者视角 假设某一天，我们需要开发一个react单页面,这个页面有一行文字和一个按钮，每次点击按钮的时候文字都会发生变化。于是我们在 [项目根目录]/src 下新建了三个简单的react文件(为了模拟 webpack 根据模块追踪打包的流程，我们建立了一个简单的引用关系: 1 2 3 4 5 // index.js import React from 'react' import ReactDom from 'react-dom' import App from './App' ReactDom.render( < App /> , document.querySelector('#container')) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // App.js import React from 'react' import Switch from './Switch.js' export default class App extends

1. React.lazy的用法 React.lazy方法可以异步加载组件文件。 const Foo = React.lazy(() => import('../componets/Foo)); React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等。 <React.Suspense fallback={<div>loading...</div>}> <Foo/> </React.Suspense> 2. React.lazy原理 React.lazy使用import来懒加载组件，import在webpack中最终会调用requireEnsure方法，动态插入script来请求js文件，类似jsonp的形式。 来源： oschina 链接： https://my.oschina.net/u/4266023/blog/4279013

在不影响中间组件的情况下, 从根组件向最底层组件传值 根组件使用Provide提供值, 子组件使用useContext获取提供的值 import React, { useState, useContext, useEffect } from "react"; const A = () => { return ( <div> A<B></B> </div> ); }; const B = () => { return ( <div> B<C></C> </div> ); }; const C = () => { const age = useContext(AgeContext); const score = useContext(ScoreContext); return ( <div> C:{age},{score} </div> ); }; const AgeContext = React.createContext(0); const ScoreContext = React.createContext(0); export default () => { return ( <AgeContext.Provider value={18}> <ScoreContext.Provider value={60}> <A /> </ScoreContext.Provider> <

Promise 是异步编程的一种解决方案。 Promise /** * 属性 */ Promise.length Promise.prototype /** * 方法 */ Promise.all(iterable) // 所有成功触发成功 任何失败触发失败 Promise.race(iterable) // 任意一个成功或失败后触发 Promise.reject(reason) Promise.resolve(value) /** * 原型 */ Promise.prototype.constructor //方法 Promise.prototype.catch(onRejected) Promise.prototype.then(onFulfilled, onRejected) Promise.prototype.finally(onFinally) Promise 有三种状态 pending: 初始状态，既不是成功，也不是失败状态。 resolve: 意味着操作成功完成。(resoloved) reject: 意味着操作失败。 pending pending 是初始状态，执行 resolve/reject 会进入对应状态，如果不执行，责一直为 pending 状态 例如下面代码，promise 将一直在 pending 状态，不会执行 then/catch. new

Taro 3 正式版发布：开放式跨端跨框架解决方案 从 Taro 第一个版本发布到现在，Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3（Taro Next）正式版，希望 Taro 未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性： 跨框架：React、Nerv、Vue 2、Vue 3、jQuery 在旧版本的 Taro，我们以微信小程序的开发规范为基准，使用 React/JSX 的方式来进行开发。而在 Taro 3，我们把这一思路量化为一个编程模型： 设微信小程序生命周期为一个 interface ，不同的框架实例的生命周期虽然不尽相同，但我们可以根据框架生命周期分别新建一个 class 去 implements 小程序生命周期的 interface 。相应地，小程序的组件/API/路由规范可以使用同样的思路和模型让不同框架的代码，运行在不同的端上： 在 Taro 3 中我们内置了 React、Nerv、Vue 2、Vue 3 四种框架的支持，开发者可以通过 taro init 命令创建对应的模板，并编写与框架本身生命周期、调用方法合乎一致的代码（idiomatic code），在语法上也没有任何的限制。 在四类框架之外，Taro 3 还提供 jQuery-like API 的支持

背景 前端开发都少不了对后台的调用，后台地址配置在哪里，是一个很纠结的问题 为此大家开动脑筋，想了不少办法： 在代码中定义一个常量如baseUrl，后台请求时，统一拼上这个baseUrl； 问题：本地、开发、测试、生产环境地址不一样，得反复改地址； 前端与后台代码部署在一个域下，使用相对路径访问后台； 问题：开发阶段本地调试的时候，还是避免不了要用方案一来配置一个baseUrl，且这个改动与代码放在一起，一不小心就提交到代码库，CI打出来的包就不对了。 解决方案 只要是通过React和Vue脚手架创建的项目，都支持配置环境变量，使用方式： 定义环境变量 #React项目.env文件 REACT_APP_BASEURL=https://prod.utcook.com #Vue项目.env文件 VUE_APP_BASEURL=https://prod.utcook.com 在代码中使用 import axios from 'axios'; const baseUrl = process.env.REACT_APP_BASEURL; axios.get("${baseUrl}/api/user/list"); 本地调试时，后台地址不一样怎么办？ 有两种方式可以定义本地地址： 1. 通过.env.local文件： #React项目.env.local文件 REACT_APP_BASEURL

这里记录每周值得分享的科技内容，周五发布。 本杂志开源（GitHub: ruanyf/weekly ），欢迎提交 issue，投稿或推荐科技内容。 周刊讨论区的帖子 《谁在招人？》 ，提供大量就业信息，欢迎访问或发布工作/实习岗位。 封面图 元上都遗址位于内蒙古草原，是元朝定都北京之前的首都，距今约750年的历史。马可波罗就在这里，第一次见到了元世祖忽必烈。（来源： Instagram ） 本周话题：高考志愿怎么填 前不久，亲戚朋友咨询我，高考志愿的填写建议。 我建议选择理工科，不一定是电子技术和计算机，科技类的专业都可以。本科打好数学、物理、工程的基础，具体方向以后都可以转。 理由很简单，对于普通人家的子弟，理工科会比文科更容易谋生和赚钱。 最近，有一条 新闻 ，澳大利亚因为工程师短缺，决定理工科的大学学费降低20%，同时提高文科学费，鼓励学生优先选择理工科。国内其实也是同样的情况，市场对工程师的需求很大，理工科的就业普遍好于文科。 除了就业容易，理工科的学生更容易快速积累财富。在我看来，以后赚到大钱的最容易方法，就是拿到公司股票，然后股票上市。理工科学生在这方面有优势。 创业板和科创板已经改为 注册制 ，政府不再审核了，到交易所注册一下就可以上市。这比以前容易很多，以后会有大量公司上市。但是，只有技术公司才能在创业板和科创板上市，要进入技术公司，你就应该学习理工科。 不过

为什么转行应该选Web前端？ 互联网公司的生存始于前端，导致web前端的贵和火 一般初创的互联网公司最烧钱的时候往往都是刚刚获得风投或者融资的时候，因为他们要把钱砸向前端，因为那时候没有客户访问，对于企业来说只有先做好前端技术、做好客户体验一切才有可能。 用户体验做好，才有人访问，访问的人多了，才会优化后端，才做客户分析。因此，他们获得融资后第一件事就是招聘Web前端开发人员，就是要先把前端开发做起来，客户体验先做起来，这就是为什么前端很火，前端工程师工资很高的原因。 web前端优秀人才需求大，企业高薪抢聘 互联网+时代，web前端市场需求大。随着信息产业的迅猛发展，行业人才需求量也在逐年扩大。据国内权威数据统计，未来五年，我国信息化人才总需求量高达 1500万—2000万 人。其中**“网络工程”“UI设计”“web前端”**等人才的缺口最为突出。 web前端就业范围广，具有多重选择 现在web前端的就业面是很广泛的，能够选择的岗位有**：网页制作、前端制作工程师、网站重构工程师、前端开发工程师、资深前端开发工程师、前端架构师等等。** 这样的一个职位的主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。 前端 年纪大了还适合转行吗？ 其实对于能不能转行到前端开发

https://react-redux.js.org/ 安装 yarn add react-redux 配合ramda实现的计数器 import React from "react"; import { createStore } from "redux"; import { Provider, useSelector } from "react-redux"; import km from "keymirror"; import * as R from "ramda"; const ACTION_TYPES = km({ INC: null, DEC: null, RESET: null, INC_DOUBLE: null, }); const initState = { count: 0, }; const reducer = (state = initState, action, pyload) => { switch (action.type) { case ACTION_TYPES.INC: return R.evolve({ count: R.inc }, state); case ACTION_TYPES.DEC: return R.evolve({ count: R.dec }, state); case ACTION_TYPES.INC_DOUBLE: