react

参考 https://juejin.im/post/5ec2465a5188256d841a552a 父组件传入数据和回调 两个Board组件分别显示信息 age组件接收修改age的回调, 并执行 score组件接收修改score的回调, 并执行 点击age, 修改age , 此时可以看到所有组件都被重新渲染了 如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。 React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。 默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。 分别点击age和score, 会发现没有变化的数据, 组件也不会重新渲染 import React, { useState, useEffect, useCallback } from "react"; const Board = React.memo(({ name, value }) => {

去年看到一篇文章 是写前端更新迭代的新技术，今天无意间又看到原创人翻译过来的文章啦 。这里贴下来 给大家灌一碗毒鸡汤 嘿，我最近接到一个 Web 项目，不过老实说，我这两年没怎么接触 Web 编程，听说 Web 技术已经发生了一些变化。听说你是这里对新技术最了解的 Web 开发工程师？ 准确地说，我是一名「前端工程师」。不过你算是找对人了。我对今年的技术别提多熟了，前端可视化、音乐播放器、能踢足球的无人机，你尽管问吧。我刚去 JS 大会和 React 大会逛了一圈，没有什么新技术是我不知道的。 厉害。是这样的，我要开发一个网页，用来展示用户的最新动态。我想我应该通过后端接口获取数据，然后用一个 table 来展示数据，用户可以对数据进行排序。如果服务器上的数据变化了，我还需要更新这个 table。我的思路是用 jQuery 来做。 可别用 jQuery！现在哪还有人用 jQuery。现在是 2016 年了，你绝对应该用 React。 哦，好吧，React 是什么？ React 是一个非常厉害的库，Facebook 的牛人写的。它能让页面更可控，性能极高，而且使用起来很简单。 听起来确实不错。我能用 React 展示服务器传来的数据吗？ 当然可以，你只需要添加两个依赖，一个是 React，一个是 React DOM 额，等下，为什么是两个库？ React 是我说的库，React

摘要 　　 axios是一个基于promise的HTTP库，可以用于浏览器中进行AJAX请求处理。在项目中，为了实现通用性，封装了一个axios请求。 axios封装 1、配置环境变量 // 根据不同环境变量选择不同的接口服务器域名 export const BASE_URL = process.env.REACT_APP_API; 2、创建axios实例 　　 创建axios实例可以根据官方文档进行属于自己的配置，具体属性可以参考 https://www.kancloud.cn/yunye/axios/234845 // 创建axios实例 const service = axios.create({ baseURL: BASE_URL, headers: { 'Content-Type': 'application/json;charset=UTF-8' }, timeout: 5 * 1000 // 请求超时时间 }); 3、创建request拦截器 　　 在请求、响应被then 或 catch 处理前拦截它们，在发送请求之前可以做些处理或者对请求错误做些什么处理。具体配置可以参考官网。 // request拦截器 service.interceptors.request.use( config => { // 登录时，Token登录 // const token = //

前言 最近两篇面试以及离职相关的文章不容错过哦。 离开蘑菇街后，我最近的一些想法 拼多多和酷家乐面试总结 今年面试还是比较顺的，面了五家公司(酷家乐、拼多多、字节、滴滴、蚂蚁)，都过了。 在文章里我不仅会列出面试题，还会给到一些答题建议，个人能力有限，也不能保证我回答都正确， 如果有错误，希望能纠正我。 字节 一面 说一下浏览器缓存 浏览器缓存分为 强缓存 和 协商缓存 ，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。 控制强缓存的字段有：Expires和Cache-Control，Expires 和 Cache-Control。 控制协商缓存的字段是：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。 cookie 与 session 的区别 Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中； Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式。 详见： COOKIE和SESSION有什么区别？ 浏览器如何做到 session

类似vue的computed 只有在a变化后,才重新计算c, 用于过滤不必要的计算 useMemo在渲染期间执行, 此时不要进行dom处理 import React, { useState, useEffect, useMemo } from "react"; const doJob = (a, b) => { console.log("doJob", a, b); return [a, "---", b].join(""); }; export default () => { const [a, setA] = useState(0); const [b, setB] = useState(0); // 这种情况下, 每次a,b只要有一个变化, 都会重新执行这个函数 // const c = doJob(a, b); // 只有当a变化时, 才重新计算c的属性 const c = useMemo(() => { return doJob(a, b); }, [a]); return ( <div> <div> a:{a}, b:{b}, c:{c} </div> <button onClick={() => setA((c) => c + 1)}>add a</button> <button onClick={() => setB((c) => c + 1)}>add b<

在大多数情况下，我们推荐使用 受控组件 来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。 以上是 React 官网对受控组件与非受控组件的一次解释，大学刚刚毕业时候，看到这一段， 实在有些难以接受，在我看来，既然已经选择使用了 React ,就应该完全彻底的使用受控组件，为什么开发者会有直接使用 DOM 节点开发的的非受控组件。当时在 vue 中，并没有这种设定。同时我当时在开发 Sass 网站，因为在开发 pc 端网站总是需要即时验证(即时给予用户交互，不让用户在填写完整的数据后再提示错误以致于过分沮丧)。 不过现在来看，非受控组件的确是 React 非常好的设计。 非受控与受控组件的区别与选择 非受控的输入 就像传统的HTML表单输入一样： class Form extends Component { /** 提交时候获取数据 */ handleSubmitClick = () => { const name = this._name.value; // 检测数据提示然后 } render() { return ( <div> <input type="text" ref={input => this._name = input} /> <button onClick={this

前言 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制 必须使用它的依赖注入 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React

DevUI是一支兼具设计视角和工程视角的团队，服务于华为云 DevCloud 平台和华为内部数个中后台系统，服务于设计师和前端工程师。 官方网站： devui.design Ng组件库： ng-devui （欢迎Star） 引言 重构，是我们开发过程中不可避免需要进行的一项工作。重构代码，以适配当前模块设计之初未考虑到的多样化场景，并增加模块的可维护性、健壮性、可测试性。那么，如何明确重构的方向，以及量化重构的结果呢？ 代码圈复杂度（Cyclomatic complexity，CC）可以是一个供选择的指标。 什么是圈复杂度 圈复杂度（Cyclomatic complexity，CC）也称为条件复杂度或循环复杂度，是一种软件度量，是由老托马斯·J·麦凯布（Thomas J. McCabe, Sr.）在1976年提出，用来表示程序的复杂度，其符号为VG或是M。圈复杂度即程序的源代码中线性独立路径的个数。 为何要降低模块(函数)的圈复杂度 下表为模块（函数）圈复杂度与代码状况的一个基本对照表。除了表中给出的代码状况、可测性、维护成本等指标外，圈复杂度高的模块（函数），也对应着高软件复杂度、低内聚、高风险、低可读性。我们要降低模块（函数）的圈复杂度，就是要降低其软件复杂度、增加内聚性、减少可能出现的软件缺陷个数、增强可测试性、可读性。 圈复杂度 代码状况 可测性 维护成本 1 - 10

简单计数器 set函数不会合并, 在使用对象和数组的时候需要手动解构 对于修改数据比较简单的情况, 推荐使用函数进行修改, 会传入先前值, 将返回值作为最新值 import React, { useState } from "react"; export default () => { const initCount = 0; const [count, setCount] = useState(0); const [dx, setDx] = useState(1); return ( <div> <div>count: {count}</div> <input value={dx} type="number" onChange={(e) => setDx(Number(e.target.value))} /> <div> <button onClick={() => { setCount((count) => count + dx); }} > add </button> <button onClick={() => { setCount(initCount); }} > reset </button> <button onClick={() => { setCount((count) => count - dx); }} > del </button> </div> </div

问题： I'm trying to find the proper way to define some components which could be used in a generic way: 我试图找到定义可以以一般方式使用的某些组件的正确方法： <Parent> <Child value="1"> <Child value="2"> </Parent> There is a logic going on for rendering between parent and children components of course, you can imagine <select> and <option> as an example of this logic. 当然，在父组件和子组件之间存在渲染逻辑，您可以想象 <select> 和 <option> 作为此逻辑的示例。 This is a dummy implementation for the purpose of the question: 对于这个问题，这是一个虚拟的实现： var Parent = React.createClass({ doSomething: function(value) { }, render: function() { return (<div>{this.props