你们使用react开发项目react-hooks用的多吗?

我一看hooks感觉class好像白学了

hooks虽然是大势所趋，而且写出的代码看起来也比较"干净",但是写出bug的机会远远大于class并且是非常不易排查出来的的bug

现在我写react的项目，基本上只用hooks了，而且使用官方提供的hooks，可以自己实现很多的功能，而且比class component的实现也简洁不少。

无论是class component，还是function component，都是要根据项目和自己的习惯来决定的，两种方式都是能实现对应的功能，性能上也机会没什么差别。还是要看团队和个人的习惯。

从我个人来讲，已经很习惯使用hooks了。

我们有部分场景用到了hook，并且也的确节省了很多的逻辑复用，你要用hooks，首先要理解他主要解决了什么问题提出的，class和hooks也并不是对立的

class component可以保证组件良好的可读性，hooks可以保证逻辑代码复用性

大多时候你可以将之前hooks component 作为claas component 的container

现在react router以及redux应该都支持hooks写法（我还没有升级这两个）

react的前端ui框架antd4.0也基本都用hooks重写

所以跟进是必然的，即使你不用，你也要看懂别人的代码才行啊

已经忘记了 react 的生命周期

我司基本过去一年旧项目和现在新项目已经全hooks重写，好处就是短平快，当然也不是银弹，有些复杂逻辑场景function component过了百行看起来非常头疼，如果有复杂的组件交互和数据传递，需要特别注意【重渲染】这个坑，内部实践过程中已经日常无数次浪费时间在"为什么值变了"以及"为什么值没有变"这个问题上，需要对内部开发者整体素质比较高的要求。

这世界总是有守旧派，但是世界的发展方向总是向前走，守旧派总是难以改变思维，除非你强制给他真香。

class 这种操作，代码难写，不好测试，耦合严重，即便搞些模式也沉重不堪，现在没有用的，基本是react还没升级的，要么就是shishan。

超级无敌好用，完全可以取代大部分的class组件。

尤其是大部分数据以及业务逻辑基本相同的组件，抽离出一个公共的reducer，复用起来简直不要太happy！

目前暂时没有遇到需要用class组件来写的业务，如果大家有遇到，欢迎评论区讨论学习呀！

混著写完全没问题。大致有个原则：route下的page页面完全用class写法，子组件大部分使用hooks，复杂的组件也还是class写，主要是class的看起来比较直观，要不然一堆useState、useCallback都看懵了。

项目已经用 hooks 重构，hooks 的优点在我看来，是一切都可以自动化的去运行，以及可以特别方便的进行代码复用。

挺多的

大概是因为新用react不久的原因，所以hooks用得不多，主要还是class的那一套。

如果我决定function base的话，应该会全转hooks。没什么白学不白学的，oop有其存在的理由跟优势，oop写出来的代码简洁易懂好debug。

至于function base的话，要写好其实也不容易。

当然你要混用。。。我也没话说，代码清晰明了就好

hooks真正上线时间还不算太久，用在公司项目里的应该还不太多，但是作为发展趋势，以后肯定会越来越多，毕竟是react的主推版本，而不是作为一个可选配置。学起来吧。我的github有hooks的基础demo，欢迎一起学习

react-hooks目前使用很广泛，react趋势是使用hooks，类组件也有使用，具体根据业务场景分析

听说隔壁Java都在支持函数式了，用hooks没毛病

什么样的公司才能接触到react的项目呢？

自从hooks发布已经一直在用，确实挺不错的，但是内部状态、方法相互依赖的问题处理会非常非常非常的麻烦，我只想说是花样式警告。

你学class也是应该的，根本不存在白学的问题，毕竟也是react开发的核心基础知识。

技术多不压身，做技术这行不存在白学这回事，只是分配精力的力度关系而已。

多，除非是 shishan ，否则都换成 hooks 了。

不理解题主说的 class 好像白学了，我寻思 CC 那一套不就是生命周期?状态更新吗？其他的都是 js 里的东西，而且这组件生命周期和状态更新也是在使用 FC x hooks 的时候需要的两种知识前提呀。

hook 是大趋势，但也不是银弹。class 的可控性是很好的，hook 虽然写得爽，如果写得不太规范，可能会导致一系列的问题。hook 的部分 api 依赖项毕竟需要手动写入，虽然官方提供了相关 lint 插件来规避，但极易受开发者代码影响。class 和 hook 其实并不矛盾，混合著用也没问题，现阶段 hook 也没办法完全取代 class，介于 react 官方会主推 hook，以后 hook 应该能完全取代 class，可以先用起来，毕竟写起来是真的酸爽……

react-hooks出来才没多久，可能很多地方还不成熟。

在react-hooks没形成之前，都用了其他的第三方方式去实现，如果早期项目很大，肯定不可能一个个的来用react-hooks重构，那需要花费大量的精力和人力。

但是以后肯定会越来越多的使用react-hooks的。

也不排除混合使用的情况。但是react-hooks是以后的趋势

class组件和function组件最终都只是ui的载体，业务逻辑和ui怎么分离是大家一致探索的方向，在class时代走过了各种套路和姿势，hoc，renderProps是手段，redux(dva, rematch)、mbox等是具体实现，以dva,rematch为例，沉淀出的一套 ui ---&> dispatch action to effect ---&> update store data ---&> notify ui re-render模式其实用起来已经很顺手了，但是hook一出，业务逻辑则封装成一个个hook了，所以class和function组件逻辑共享成了巨大的问题，大家只能2选1，但是我们可不可以换个思路呢？

把class组件和function组件只看ui的载体，无论是hoc，renderProps，还是hook，都看作是分离业务逻辑和ui的手段，让他们都走ui ---&> dispatch action to effect ---&> update store data ---&> notify ui re-render这一套经典模式难道不可以吗？concent https://github.com/concentjs/concent 让这个目标成为可能，基于注入实例上下文的原理，统一了class组件和function组件的逻辑共享方式，统一它们的生个周期定义方式，同时内置依赖收集系统，精确渲染你的ui节点，携带了大量新特性(setup, computedwatch, lazyDispatch, renderKey等)增强你的组件但是都是可选的，按需使用就好，保持简单是concent的终极目标。以下是三个todo-mvc实战示例，可以对比下代码的精简程度，或许能得出你想要的答案：

concent https://codesandbox.io/s/todoapp-react-concent-fvgvc

mbox https://codesandbox.io/s/todo-mvc-mbox-k42q1

reduxhook https://codesandbox.io/s/todo-mvc-redux-49kg0

以下一段代码演示依赖收集系统（注意哦，无任何根Provider包裹，意味著你的项目可以随时无痛接入concent，无需其他改造）

https://codesandbox.io/s/concent-watch-7j0mw

import React from "react"; import "./styles.css"; import { run, useConcent, defWatch } from concent;

run({
login:{// 定义login模块
state:{// login模块state
name:c2,
addr:bj,
info:{
sex: 1,
grade: 19,
}
},
computed: {// login模块computed
funnyName(newState){
// 收集到funnyName对应的依赖是 name
return `${newState.name}_${Date.now()}`
},
otherFunnyName(newState, oldState, fnCtx){
// 获取了funnyName的计算结果和newState.addr作为输入再次计算
// 所以这里收集到otherFunnyName对应的依赖是 name addr
return `${fnCtx.cuVal.funnyName}_${newState.addr}`
}
},
watch:{// login模块watch
// watchKey name和stateKey同名，默认监听name变化
name(newState, oldState){
console.log(`name changed from ${newState.name} to ${oldState.name}`);
},
// 从newState 读取了addr， info两个属性的值，当前watch函数的依赖是 addr, info
// 它们任意一个发生变化时，都会触发此watch函数
addrOrInfoChanged: defWatch((newState, oldState)=&>{
const {addr, info} = newState;
console.log(`addr is${addr}, info is${JSON.stringify(info)}`);
}, {immediate:true})
}
}
})