在 React 函数组件中，组件的渲染是由状态（state）和属性（props）的变化触发的，而直接在函数组件中定义的变量并不会引起组件的重新渲染。
一个纯函数是一个不依赖于且不改变其作用域之外的变量状态的函数，这也意味着一个纯函数对于同样的参数总是返回同样的结果。
此方法会返回两个值：当期状态和更新状态的函数。效果同 this.state 与this.setState，区别是 useState 传入的值并不一定要对象，并且在更新的时候不会把当前的 state 与旧的 state 合并。
React调用回调函数，正确设置this指向的三种方法 通过bind this.increment = this.increment.bind(this); 通过箭头函数 <button onClick={this.multi}>点我*10</button> multi = () => { this.setState({ count: this.state.count * 10 }) } 箭头函数包裹 <button onClick={() => {this.muti2(
2.发现组件是函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM,随后展示在页面中
React调用回调函数，正确设置this指向的三种方法通过bindthis.increment = this.increment.bind(this);通过箭头函数<button onClick={this.multi}>点我*10</button> multi = () => { this.setState({ count: this.state.count * 10 })}箭头函数包裹<button onClick={() => {this.muti2()}}>点我*10</b
component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新
前言 上一篇已经讲了一些react的基本配置，本遍接着讲热更新以及react+redux的配置与使用。 热更新 我们在实际开发时，都有用到热更新，在修改代码后，不用每次都重启服务，而是自动更新。并而不
原文链接：https://bobbyhadz.com/blog/react-onclick-link[1]
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。
Refs 提供了一种方式，用于访问在 render 方法中创建的 React 元素或 DOM 节点。Refs 应该谨慎使用，如下场景使用 Refs 比较适合：
现在虽然我们能通过路由实现组件切换, 但是现在我们的路由都比较分散, 不利于我们管理和维护，所以 React 也考虑到了这个问题, 也给我们提供了统一管理路由的方案。
现代的前端应用大多都是SPA(单页应用程序)，也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生
GitHub地址 一、react-router4 1、react-router4理解 1) react的一个插件库 2) 专门用来实现一个SPA应用 3) 基于react的项目基本都会用到此库 2、SPA的理解 1) 单页Web应用（single page web application，SPA 2) 整个应用只有一个完整的页面 3) 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 4) 当点击路由链接时, 只会做页面的局部更新 5) 数据都需要通过a
上面的代码中，App组件内有一个简单的Bar组件，通过component属性被Route引用。
造轮子就是应用核心原理 + 周边功能的堆砌，所以学习成熟库的源码往往会受到非核心代码干扰，Router 这个 repo 用不到 100 行源码实现了 React Router 核心机制，很适合用来学习。
Ajax请求应该写在组件创建期的第五个阶段，即 componentDidMount生命周期方法中。原因如下。
history 库 a. 网址: github.com/ReactTraini… b. 管理浏览器会话历史(history)的工具库 c. 包装的是原生 BOM 中 window.history 和 window.location.hash
在2020的今天，构建一个 web 应用对于我们来说，并非什么难事。因为有很多足够多优秀的的前端框架（比如 React，Vue 和 Angular）；以及一些易用且强大的UI库（比如 Ant Design）为我们保驾护航，极大地缩短了应用构建的周期。
只需要保证，在同一个数组中的兄弟元素之间的 key 是唯一的。而不需要在整个应用程序甚至单个组件中保持唯一。
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。
当前前端开发已经进入以vue、react、webpack为代表的编程2.0时代。在1.0时代，代码是写给机器的；在2.0时代，代码是写给工具的，然后由工具处理后再转给机器。
通常，render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。
可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？
前两篇教程介绍了 Redux 的基本用法和异步操作，今天是最后一部分，介绍如何在 React 项目中使用 Redux。 为了方便使用，Redux 的作者封装了一个 React 专用的库 React-R
当调用 setState时， React做的第一件事是将传递给setState的对象合并到组件的当前状态，这将启动一个称为和解（ reconciliation）的过程。
注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错
this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。
这是最有可能由面试官提出的 常被问到的50个React面试问答。为了方便您访问，我对React面试问题进行了归类：
从3个月之前，就想自己开发一个库，从而提高一下自己的能力。庆幸的是在年前就开发出来了，并且生态也初步建成。这里提到的生态包括：Create Strve App、Strve Router以及其他辅助Strve.js开发的工具。
在react17中，只有react事件会进行批处理，原生js事件、promise，setTimeout、setInterval不会
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
英文 | https://blog.stackademic.com/top-40-reactjs-interview-questions-and-answers-for-2024-70c94e5fccca
【编者按】React 生态提供了很多选择方案，这里我们选用 Redux 和 react-router 来做说 React 提供了两个方法renderToString和renderToStaticMarkup用来将组件（Virtual DOM）输出成 HTML 字符串，这是 React 服务器端渲染的基础，它移除了服务器端对于浏览器环境的依赖，所以让服务器端渲染变成了一件有吸引力的事情。 服务器端渲染除了要解决对浏览器环境的依赖，还要解决两个问题： 前后端可以共享代码 前后端路由可以统一处理 React 生态
shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）
Context是React提供的一种跨组件的通信方案，useContext与useReducer是在React 16.8之后提供的Hooks API，我们可以通过useContext与useReducer来完成全局状态管理例如Redux的轻量级替代方案。
笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波 。陆续更新前端文章。
以上是最常见的React router。在简单的单页应用中，这样写是ok的。因为打包后的单一js文件bundle.js也不过200k左右，gzip之后，对加载性能并没有太大的影响。 但是，当产品经历多次迭代后，追加的页面导致bundle.js的体积不断变大。这时候，优化就变得很有必要。
React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。高阶作用用于强化组件，复用逻辑，提升渲染性能等作用。高阶组件也并不是很难理解，其实接触过后还是蛮简单的，接下来我将按照，高阶组件理解？，高阶组件具体怎么使用？应用场景， 高阶组件实践(源码级别) 为突破口，带大家详细了解一下高阶组件。本文篇幅比较长，建议收藏观看
原文链接：https://bobbyhadz.com/blog/react-usenavigate-may-be-used-only-in-context-of-router[1]
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中
可能我比较幸运点吧！因为在美国这边大家对工作平衡比较注意，像谷歌的话就比较舒服的了。虽然我们刚进去也年轻，偶尔也加加班，但是整体而言，在谷歌的话，你任务完成了想什么时候走都可以。所以在国内确实会难一些，业务压力会大的话。所以如果你真的觉得业务压力就更大，工作就很忙。那我建议就可能不要逼自己，如果真觉得太累，就不要逼自己。 这个开源本身也其实就是说，这个大家做开源其实都有一个阶段，就是你刚开始有一个想法想把它做出来，刚开始是一种快乐的一种状态，就是把一个想法从零到一那种快感，就是做技术人员都有这种创造一种东西的想法。但是开源在另一个过程完成之后立刻进入一种，就是从90%到100%这个过程其实是很困难的，你就会发现把一个玩具做成真的能用的东西就需要投入很多，当你把它做得真的能用，真的有人用的时候，这些人就会继续给你提不停的要求。这就说，哎呀！我得去回应这些人的期待，这又是一种心理压力。 其实说就是很多时候，大家都是刚开始做开源的时候，这种创造一种东西的快感所吸引。没有意识到你以后会有很多的commit。我对很多想要做开源的朋友的建议是，想清楚你做开源想要做什么，如果你就只是想写一个库觉得很爽，但是我后期不想去做让它耗费我很多精力去维护它，也没有问题，其实就跟大家明确这个想法。但是如果说你想做一个项目想做大做好，想跟React竞争的项目，那这个东西需要极大的投入的。如果你工作本质就很烦忙，那么大概率你就没有可能做这个。所以确实说，想好你的想要什么吧！如果你没有真的条件，如果真的很拼很拼，我就是996，我也要做开源，那你要做好心理准备。我有一段时间把自己搞成996这种状态，就是上完班回来搞Vue，其实这样精神压力是挺大的。我现在可能站着说话不腰疼，我现在还是觉得平衡一点的好。
为了解决跨浏览器兼容性问题， React中的事件处理程序将传递 SyntheticEvent的实例，它是跨浏览器事件的包装器。这些 SyntheticEvent与你习惯的原生事件具有相同的接口，它们在所有浏览器中都兼容。
使用 Link 是会有一些问题的, 他不会显示按钮的高亮显示, 所以我使用 NavLink 来替代它
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
