注意： setState()既能更新状态又能更新UI。如果在render()里继续调用setState(),setState()又会调用render(),所以产生了递归。会导致报错。
以下实例在 Hello 组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒重新设置组件的透明度，并重新渲染：
⚠️ 注意 ：不能调用setState() 原因是render是每次组件渲染时触发的，如果在里面凋setState()，则组件数据发生变化，肯定要重新渲染，但是重新渲染又会触发render。就会形成死循环！！！
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安全的。
最近一直在学vue和nodejs，想着React这块儿也不能太久不用忘记了，写篇博客来解决一下我当时初学React时的痛点，生命周期。
组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法
该生命周期函数会在组件挂载的时候触发。所谓挂载，指的是真实 DOM 元素添加到文档树上。
如果是自定义方法，React不会自己去调用，因此一般使用变量+箭头函数的形式，将该自定义方法作为一个事件的触发函数
React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命周期中提供很多钩子函数在生命周期的不同时刻调用。
在传统的 class 中，会使用 componentDidMount 和 componentDidUpdate 获取数据。同时 componentDidMount 中也会处理一些其他的事务，例如事件监听，定时器等等。而后还需要在 componentWillUnmount 中取消。万一忘记其中某一个部分或者处理的时间过多，很可能导致一些可怕的bug。
前段时间学习了 React 新发布的 Hook 新功能，学完立马就爱上了这个新 API，用起来感觉比 class 组件爽多了。但 hook 虽然看似简单，但是要能熟练运用还是得花上一段时间。
然后，准备加载组件，会调用 componentWillMount() ，其原型如下： void componentWillMount() 这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。
本文作为React总结系列的第一篇文章，会总结组件的生命周期及执行顺序，涉及内容比较基础。在后面的系列文章中则会总结React Hooks等内容。
一、图示 二、编写电子时钟 1 新建DigitalClock.js import React from 'react' /** * */ class DigitalClock extends R
react的组件模式可以观看Michael Chan的演讲视频，平时大家常听到的react模式也是HOC, HOC的使用场景很多，譬如react-redux的connect，这里不赘述HOC相关，感兴趣可以自行了解。
useEffect与useLayoutEffect可以统称为Effect Hook，Effect Hook可以在函数组件中执行副作用操作，副作用是指函数或者表达式的行为依赖于外部环境，或者在这里可以理解为修改了某状态会对其他的状态造成影响，这个影响就是副作用,数据获取，设置订阅以及手动更改React组件中的DOM都属于副作用。
此外，还有 State、Props、Context、Ref 等特性。这些加持让 Class 成为了具备完整组件特性的唯一选项，尽管Class 也存在许多问题，但它无可替代
在面向对象编程中，任何对象的存在都会存在生命周期。类似我们iOS 的View，就会有LoadView，ViewWillAppear，ViewDidLoad等等生命周期。RN也不例外，这篇主要学习RN的生命周期，在开发中如果掌握了并熟练的运用生命周期函数的话，往往开发能事半功倍。
React Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
在官网上，Hook简介的章节里，很安抚性地提到，Hook的提出不旨在替换Class创建组件，而是一种可选、100%向后兼容的特性。然而从使用效果的来说，Hook的应用，解决了render props 和高阶组件组织代码所带来晦涩难懂的窘况，让前端代码代码复用的粒度变得更低，代码可读性更高，研发效率自然也更高。我们团队的新代码，基本都在转向Hook，我也不例外，为了快速翻阅资料，整理以下核心信息，方便高效研发。
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。组件的任何UI改变，都可以从State的变化中反映出来；State中的所有状态都用于反映UI的变化，不应有多余状态。
(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
作用: 用于函数式组件操作 state，类似于类组件的 setState 写法：[state, setState] = useState(initValue)
注意：在点击事件中，不要直接调用函数，如果需要传递参数，使用箭头函数,jsx中所有dom事件必须用驼峰命名。如下：
工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。
React的组件化给前端开发带来了前所未有的体验，我们可以像玩乐高玩具一样将组件堆积拼接起来，组成完整的UI界面，在加快开发速度的同时又提高了代码的可维护性。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
在做业务开发时，经常会遇到这样的需求：某某某购买了该商品，某某某抽奖获得了什么，这类消息用来吸引用户。通常需要一个滚动框来展示所有消息，且每次的新消息都会展示在滚框的顶部，但同时这个消息滚动框还是可以
通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method”
本文就来探索一下，如何让 setInterval 和 Hooks 和谐地玩耍，为什么是这种方式，以及这种方式给你带来了什么新能力。
如果你不想阅读整篇文章，可以快速浏览这份摘要。要是某些部分不容易理解，你可以往下滚动寻找相关的内容去阅读。
现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行为逻辑等)，复用起来却不那么容易，很难把状态逻辑拆出来作为一个可复用的函数或组件，实际上在Hooks出现之前，都缺少一种简单直接的组件行为扩展方式，对于Mixin、HOC、Render Props都算是在既有(组件机制的)游戏规则下探索出来的上层模式，一直没有从根源上很好地解决组件间逻辑复用的问题，直到Hooks登上舞台，下面我们就来介绍一下Mixin、HOC、Render Props、Hooks四种组件间复用的方式。
生命周期的回调函数：你定义了，你没有调用，但是这个函数却执行了。如render()函数。也称为生命周期的“钩子函数”。
直接上代码 App.js文件 let list = [ { id: 1, img: require('./static/image/one.jpg') }, { id: 2, img: require('./static/image/two.jpg') }, { id: 3, img: require('./static/image/three.jpg') } ]
如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Component 的思维模式有一个初步认识，防止因思维模式不同步造成的困扰。
useState 让函数组件也可以有 state 状态，并进行状态数据的读写操作。
state：组件函数或类的成员，render一次渲染，setstate调用后值有更新才会重新调用render preps： 虚拟dom的属性，preps输出属性，html端显示输入
组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
当时他们的团队在市面上没找到合适的MVC 框架，就自己写一个 JS 框架，用来架设 instagram（图片分享社交网路），2013年开源
原文地址:https://github.com/happylindz/blog/issues/19
一、prop，state，ref 1.ref：引用一个组件(是从render中返回该组件实例) 2.props：组件中的属性， 2.1常用于跳转页面的传值：this.props.navigator.push({component:xxx,id:this.props.id}) 2.2不同组件之间传值 2.3子组件向父组件传值 3.state：组件中的状态 父组件向子组件传值 二、react-native组件思想 react-native的组件其实是采用的react的组件思想，
使用React 的时候， 难免要用到setState , 有一些基础还是需要了解一下。
我们可以看到了arr.map ，它调用的是map方法，那arr 就得是一个数组，但是大家看下面，它给我们传过来得是也给Number,Number根本就没有map方法，那这个时候就一定会报错。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
