11 天前 / 噶牛爱尚
写文章React Hooks 源码解析(1):类组件、函数组件、纯组件Airing腾讯 前端工程师5 人赞同了该文章React Hooks 源码解析(1):类组件、函数组件、纯组件React 源码版本: v16.9.0 源码注释笔记:airingursb/react1 Class Component VS. Functional Component根据 React 官网,React 中的组件可分为函数式组件(Functional Component)与类组件(Class Component)。 1.1 Class Component这是一个我们熟悉的类组件: // Class Componmentclass Welcome extends React.Component {render() {return Hello, {this.props.name};}}1.2 Functional C......
14 天前 / 江米小枣tonylua
原文:https://dev.to/voluntadpear/comparing-react-hooks-with-vue-composition-api-4b32 Vue 最近提出了Composition API RFC,一种新的书写 Vue 组件的 API;该 API 受到 React Hooks 的启发,但有一些有趣的差异,也就是本文要探讨的内容。该 RFC 始自于在社区某些部分受到大量非议的之前一个叫做Function-based Component API的版本 -- 人们担心 Vue 开始变得更复杂而不像大家最初喜欢它时那样是个简单的库了。 参阅《在 React 和 Vue 中尝鲜 Hooks》一文 Vue 核心团队解决了围绕首个 RFC 的困惑并在新的版本中提出了一些引人关......
28 天前 / 冷星1024
Photo byDylan FerreiraonUnsplash 原文:https://www.freecodecamp.org/news/animating-visibility-with-css-an-example-of-react-hooks/ 作者:Christian Sepulveda 译者:Zou Li 提示:文中的蓝色字体可点击“阅读原文”访问更多内容 动画总是会取悦用户。看到各种文章的介绍,你可能会觉得开发者们喜欢使用 React Hooks,但我发现自己开始慢慢对 Hooks 产生厌倦了。 某个意外的发现让我对 React Hooks 有了新的认识,它不仅仅是一种新的开发方式。也许你已经从文章标题猜到是什么了,没错,就是动画! 我正在开发一个基于 React......
86 天前 / Nealyang
本文首发于政采云前端团队博客:看完这篇,你也能把ReactHooks玩出花 https://www.zoo.team/article/react-hooks 本文中出现的部分名称映射: 函数式组件 => Function Component类组件 => Class Component工具函数 => Util Function钩子 => React Hook初始值 => initialValue先讲概念 React v16.7.0-alpha 中第一次引入了 Hooks 的概念,在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对 React Hook 的概念性的描述,在开发中我们用到的实际功能都应该叫做 React hook。React Hook 是一种特殊的函数,其本质可以是函数式组......
190 天前 / 噶牛爱尚
写文章从React Hooks看React的本质canonical千山万水32 人赞同了该文章后jQuery时代的前端革命是由AngularJs发起的,它最初的一个想法是将后台的技术架构复制到前台来。后端的一个核心技术是所谓的模板技术(template)。它可以用一个公式来描述 html = template(vars)这是一个特别直观的想法:模板就是一个普通函数,它根据传入的变量信息(无特殊要求)拼接得到字符串(无特殊结构)。这一模型完全不需要考虑面向对象传统的状态分散管理的问题,基本上是一种函数式的解决方案。 React的模式相当于是对模板渲染模型的一个面向领域结构的改进 vdom......
303 天前 / heartEngine
React 16.7-alpha中新增了新功能:`Hooks`。总结他的功能就是:让`FunctionalComponent`具有`ClassComponent`的功能。```jsimport React, { useState, useEffect } from 'react'function FunComp(props) {const [data, setData] = useState('initialState')function handleChange(e) {setData(e.target.value)}useEffect(() => {subscribeToSomething()return () => {unSubscribeToSomething()}})return (
336 天前 / 江米小枣tonylua
原文:https://blog.kentcdodds.com/react-hooks-whats-going-to-happen-to-my-tests-df4c2b4d67b7
我们该如何准备好 React 新特性hooks的测试呢?
对于即将来临的 React Hooks 特性,我听到最常见的问题都是关于测试的。我都能想像出你测试这种时的焦虑:
// 借用另一篇博文中的例子:// https://kcd.im/implementation-detailstest('setOpenIndex sets the open index state properly', () => {const wrapper = mount(