在做react项目开发的时候，个人是非常建议使用function定义组件的。作为一个技术人员来讲，每天做着枯燥无味的工作，很希望代码能带给人快乐，so 去学ruby吧！！！这只是玩笑话，大家都知道这句话ruby给程序员带来幸福感，当然我希望js也是如此。扯远了。。。 先看一段代码，两种方式定义组件 class方式定义组件 import React, { Component } from 'react' class Counter extends Component { constructor(props) { super(props) // } render() { return } } function方式定义组件 import React from 'react' function Counter(props) { return () } 但从代码量来说，function这种写法更加节省代码。 通过一个简单的对比，列出来function定义组件的优势吧 this指向问题 在react开发中最麻烦的就是this指向问题，在class方式定义的组件中，往往在方法调用的时候会出现this执行异常的问题。为了解决这些问题，需要使用bind来进行this执行的改变 class定义的组件 ... constructor(props) { super(props) this.state = { ... } this.clickHandle = this.clickHandle.bind(this) this.changeHandle = this.changeHandle.bind(this) } clickHandle() { /// } changeHandle() { /// } render() { return () } ... 看上面这一串密密麻麻的this绑定操作，是不是好揪心。感觉怎么有些不那么js function定义的组件 ... const clickHandle = () => { .... } const changeHandle = () => { ... } return () ... 这样是不是省事了很多。在function定义的组件中没有this指向问题 生命周期 class定义的组件可以有自己的生命周期钩子函数。请看图: 16.3之前.png 16.3之后.jpg 高端吧！怎么两张图？因为react16.3更新之后出了新的生命周期钩子函数，优化了以前的钩子函数。哎呀我去！老子学不动了，天天更新。前端学不动。。。 看到这个生命周期钩子函数是不是觉得react好牛掰。 不过放心了，在16.8之后的react中新增了hook，可以使用useEffect模拟生命周期。useEffect副作用，可以监听数据的改变触发相应的钩子函数，更方便。根本不需要记这么多的生命周期钩子函数 ... useEffect(()=>{ // 初始化的时候执行 }, []) ... 局部状态 在之前版本的react中如果要在组件内部使用局部状态只能通过class定义组件，function定义的都是无状态组件。不过这已经成为过去时了，在16.8之后的react中，新增了useState可以在function定义的组件中使用局部状态。 ​ 以下展示的使用function和class定义的组件，功能一致，只是两张写法 import React, { useState } from 'react'; function Example() { // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0); return ( ); } class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( ); } } 官网Hook简介

本文章由javascript技术分享原创和收集