在使用react中,总会碰到这样那样的问题,如何解决这些问题,希望能够随着时间的积累,慢慢成熟! 在react中的renden函数里,不能使用setState这个方法,不然会死循环,原因:是因为setState会触发render,而render后又触发setState,所以会造成死循环. 如何做到不通过设置setState方法,而调用renden,可以通过调用this.render()函数. 在state的同级设置变量名,并在render中使用这些变量,可以形成闭包,利用好这一点,很多时候可以解决页面不更新
https://segmentfault.com/a/1190000039776687
当请求 /users/:id 被重定向去 '/users/profile/:id'：
这时候会发现页面内容不会改变，原因是 React 中不建议 state不允许直接修改，而是通过类的原型对象上的方法 setState()
约束性组件（ controlled component）与非约束性组件（ uncontrolled component）有什么区别？ 在 React中，组件负责控制和管理自己的状态。 如果将HTML中的表单元素（ input、 select、 textarea等）添加到组件中，当用户与表单发生交互时，就涉及表单数据存储问题。根据表单数据的存储位置，将组件分成约東性组件和非约東性组件。 约束性组件（ controlled component）就是由 React控制的组件，也就是说，表单元素的数据存储在组件内部的状态中，表单到底呈现什么由组件决定。 如下所示， username没有存储在DOM元素内，而是存储在组件的状态中。每次要更新 username时，就要调用 setState更新状态；每次要获取 username的值，就要获取组件状态值。
一、理解 state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件) 二、 强烈注意 组件中render方法中的this为组件实例对象 组件自定义的方法中this为undefined，如何解决？ a) 强制绑定this: 通过函数对象的bind() b) 箭头函数 3. 状态数据，不能直接修改或更新 三、内部原理 1. render调用次数：1+n次（1是初始化的那次 n是
React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：
可以在 shouldcomponentupdate 该生命周期函数当中进行决定是否需要进行重新渲染，官方文档：https://zh-hans.reactjs.org/docs/react-component.html#shouldcomponentupdate
版权声明：原创不易，多多珍惜 https://blog.csdn.net/wonaixiaoshenshen/article/details/90087601
我们可以看到了arr.map ，它调用的是map方法，那arr 就得是一个数组，但是大家看下面，它给我们传过来得是也给Number,Number根本就没有map方法，那这个时候就一定会报错。
前一段时间React v16.0发布了，作为react骚年，我们当然要关注版本更新之后，react新增了哪些特性呢？
useEffect依赖了a b两个状态，当其中任意一个变化后会执行fetchData请求数据。
标题深究其实是：组件（实例）的三大核心属性。 而 只有类组件才有实例，函数式组件根本没资格。为了解决函数式组件的这个问题 react 又推出了 hooks。
总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。
react-refresh-webpack-plugin[1] 是 React 官方提供的一个 模块热替换（HMR）插件。
以 store 为核心，可以把它看成数据存储中心，但是他要更改数据的时候不能直接修改，数据修改更新的角色由Reducers来担任，store只做存储，中间人，当Reducers的更新完成以后会通过store的订阅来通知react component，组件把新的状态重新获取渲染，组件中也能主动发送action，创建action后这个动作是不会执行的，所以要dispatch这个action，让store通过reducers去做更新React Component 就是react的每个组件。
你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
setState 执行之后，会执行一个叫 enqueueSetState 的方法，这个主要作用是创建 Update 对象和发起调度，可以看下这个函数的逻辑
refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。
setState 执行之后，会执行一个叫 enqueueSetState 的方法，这个主要作用是创建 Update 对象和发起调度，可以看下这个函数的逻辑，
（3）组件事件回调函数方法的作用域是组件实例化对象（绑定父组件提供的方法就是父组件实例化对象），无法改变。
作为前端最常用的js库之一，熟悉react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的使用层面或者想在前端技能的深度上有所突破，那熟悉react源码将是你进步的很好的方式。
list 是使用 useState 管理的状态。button 绑定了事件 onClick={add}。
通常，render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
Ajax请求应该写在组件创建期的第五个阶段，即 componentDidMount生命周期方法中。原因如下。
React-Router 支持使用 hash（对应 HashRouter）和 browser（对应 BrowserRouter） 两种路由规则， react-router-dom 提供了 BrowserRouter 和 HashRouter 两个组件来实现应用的 UI 和 URL 同步：
React通过this.state来访问state，通过this.setState()方法来更新state，当this.setState()方法被调用的时候，React会重新调用render方法来重新渲染UI。相比较于在使用Hooks完成组件下所需要的心智负担，setState就是在使用class完成组件下所需要的心智负担，当然所谓的心智负担也许叫做所必须的基础知识更加合适一些。
注意：batchingStrategy 对象可以理解为“锁管理器”。这里的“锁”，是指 React 全局唯一的 isBatchingUpdates 变量，isBatchingUpdates 的初始值是 false，意味着“当前并未进行任何批量更新操作”。每当 React 调用 batchedUpdate 去执行更新动作时，会先把这个锁给“锁上”（置为 true），表明“现在正处于批量更新过程中”。当锁被“锁上”的时候，任何需要更新的组件都只能暂时进入 dirtyComponents 里排队等候下一次的批量更新，而不能随意“插队”。此处体现的“任务锁”的思想，是 React 面对大量状态仍然能够实现有序分批处理的基石。
在使用react搭配react-router做应用的时候，你可能遇到这样的问题，当我从第一个页面过渡到第二个页面，然后返回之后，发现之前的页面的状态全部不见了，即回到了初始的状态。 这点在页面存在多个TAB页或者多条件筛选的时候体验会更加明显，这时候我又不得不点击我之前选择的页签，重新选择筛选条件，然后再进行搜索。因此，在这种情况下，保存之前的状态显得尤为亟待解决，下面是自己实践出来的几种方法，做一下分享，同时希望和各位一起探讨，看能不能有什么更好的办法。 代码：github 解决方案一：子路由方式 //
在 React 中，对于每一次由状态改变导致页面视图的改变，都会经历两个阶段：render 阶段、commit 阶段。
究其原因，v17.0主要的工作在于源码内部对Concurrent Mode的支持。所以v17版本也被称为“垫脚石”版本。
在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载之前 Ajax 请求已经完成，如果是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起作用。在 componentDidMount 中发起网络请求将保证这有一个组件可以更新了。
请勿执行的操作以及如何解决的方法，这部分内容是针对React的新手开发人员提供的。
BrowerRouter，利用HTML5中 history API实现，需要服务器端支持，兼容性不是很好。
2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，在写文章的时候参考资料比较多，比较容易深刻的理解。
为了解决跨浏览器兼容性问题， React中的事件处理程序将传递 SyntheticEvent的实例，它是跨浏览器事件的包装器。这些 SyntheticEvent与你习惯的原生事件具有相同的接口，它们在所有浏览器中都兼容。
网上有许多关于react源码解读的文章，其中有很多都只是单纯贴源码，罗列变量名。其实大家都知道这个英文怎么读，直译也大概知道意思，但是这个英文在react中起到什么作用，并没有说的很通俗明白。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
