React之面向组件编程-函数式组件

最新推荐文章于 2022-05-08 00:00:00 发布
最新推荐文章于 2022-05-08 00:00:00 发布
阅读量191 收藏
点赞数
分类专栏： react 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/120191598
版权

在这里插入图片描述
在这里插入图片描述

函数式组件

错误用法：
在这里插入图片描述
在这里插入图片描述
正确写法：
在这里插入图片描述
还是报错：
在这里插入图片描述
真·正确写法：
在这里插入图片描述
在这里插入图片描述

改一下名字：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

函数式组件，我们没有主动调用函数，是react帮我们调用了函数。我们看一下在react函数式组件中， this指的是什么

在这里插入图片描述
在这里插入图片描述

为什么this指的是undefined? 因为我们的jsx是经过babel翻译的，babel翻译代码以后，开启严格模式。严格模式的一个显著特点就是，禁止自定义函数中的this指向window

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Akimoto Hiroshi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 实用笔记（一）JavaScript 函数式编程
u011783277的博客
09-02 142
什么是函数编程 在JavaScript中，函数可以表示应用程序中的数据。函数就是变量，可以将它添加到对象中。 可以将函数添加到数组中 函数可以像其他变量那样，作为其他函数的参数进行传递 函数可以像其他变量那样，作为其他函数的执行结果被返回 ...
React学习之 -- 函数式编程
YuqiRealm.com
04-24 4805
React把需要不断重复构建的UI抽象成了组件，它充分利用很多函数式的方法减少了冗余代码。可以说，函数式编程是React的精髓。那么，到底什么是函数式编程呢？维基百科给出的解释： （注意星号*之间的内容。）函数式编程（英语：functional programming）或称函数程序设计，又称泛函编程，是一种编程范型，它将电脑运算视为数学上的函数计算，并且**避免使用程序状态以及易变对象**。函数编
react 函数式编程_函数式编程和React式体系结构第1部分
danpu0978的博客
05-24 329
react 函数式编程 编写企业软件非常困难，作为工程师，我们的工作是在时间，预算和资源的范围内为企业创造价值。 复杂性使我们难以实现这一价值。 我们将始终必须处理系统的基本复杂性 ，为此，我们需要与领域专家进行有效沟通以帮助我们为解决方案建模。 同时，我们必须将意外的复杂性降到最低，以便工程方面的关注不会增加开发过程中的摩擦。 本系列博客文章的目的是了解功能编程，React式编程和参与者模型...
React躬行记（1）——函数式编程
weixin_30558305的博客
06-03 267
　　函数式编程是React的精髓，在正式讲解React之前，有必要先了解一下函数式编程，有助于更好的理解React的特点。函数式编程（Functional Programming）不是一种新的框架或工具，而是一种以函数为主的编程范式。编程范式也叫编程范型，是一类编程风格，除了函数式编程，常用的还有面向对象编程、命令式编程等。 一、声明式编程 　　声明时编程也是一种范式，但它是一个比较...
【React 全家桶】React面向组件编程——函数式组件和类式组件
Dai的博客
01-12 489
【React 全家桶】React面向组件编程——函数式组件和类式组件
React用于React组件CSS构造函数-React开发
05-27
每个React组件都有一个用于功能逻辑的内置javascript构造函数。 介绍CSS构造函数的样式！ 从'react'导入React； 从'css-constructor'导入css； //吗？ 每个React组件都有一个用于功能逻辑的内置javascript构造函数。...
react-horizontal-scrolling-menu:React的水平滚动菜单组件
04-18
npm install --save react-horizontal-scrolling-menu 在项目中： import React , { Component } from 'react' ; import ScrollMenu from 'react-horizontal-scrolling-menu' ; import './App.css' ; // list o
React拆分窗格组件-React开发
05-27
安装npm install react-split-pane＃，或者如果您使用纱线，则添加react-split-pane ##示例用法```j React Split Pane Split-Pane React组件，可以嵌套或垂直或水平拆分！ 安装npm install react-split-pane＃或者...
react-reactdraggableReact可拖拽组件
08-15
react-draggable - React可拖拽组件
React-Native 组件之 Modal的使用详解
08-29
本篇文章主要介绍了React-Native 组件之 Modal的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
从函数式编程理解 React Hooks
konsoue的博客
02-03 916
2019 年 2 月 6 日，React 官方 推出 React v16.8.0，稳定的 Hooks 功能出世。 React Hooks 和 函数式组件的配合，更能适应函数式编程的思维。 数学上定义的函数公式是：y = f(x) 如果将状态 state视为 输入 x，视图 UI视为 输出 y，编写的函数组件为 Fn，那么可以写出这样一个式子：UI = Fn(state) 将 React 的 Hooks，按自变量和因变量划分 自变量 为什么说这三个 hook 是自变量呢？ 因为他们如果值
React中的函数式编程及函数式编程定义的深刻解读
有问题 ! 请留言 !
02-13 4408
React中的函数式编程及函数式编程定义的深刻解读 因为一直有了解函数式编程，也知道React是比较遵循函数式编程设计模式的框架，但是一直对函数是编程的定义和理解不是很清楚，到底函数式编程有上面优势，React如何遵循函数是编程，这些都是需要去仔细推敲的，可以让以后的代码写的更为优雅和合理 什么是函数式编程 函数是编程是一种设计思想，就像面向对象编程也是一种设计思想。函数式编程总的来说就是用...
react函数式编程
sunlihong123的博客
09-24 591
react函数式编程好处 1、函数式编程让我们的代码更清晰，每个功能都是一个函数。 2、函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。 ...
react焕发第二春，函数式编程HOOKS
通俗易懂
05-08 619
文章目录HOOKSHook 使用规则useState()：状态钩子useEffect()：副作用钩子副效应是什么？useEffect() 的用法useEffect() 的用途useContext()：共享状态钩子useReducer()：action 钩子创建自己的 HooksHook API HOOKS Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 Hook 是一些可以让你在函数组件里“钩入” React state
函数式编程——入门笔记与React实践
weixin_33812433的博客
11-02 130
前言 最近在看近来很火的函数式编程教程《Mostly Adequate Guide》 （中文版：《JS函数式编程指南》），收获很大。对于函数式编程的初学者，这本书不仅深入浅出，更让人感受到函数式编程的优势和美感，强烈推荐给想要学习函数式编程的朋友。 这篇文章是我个人的一个学习笔记，在总结知识的同时，也尝试以React组件的输入事件响应为例...
React的函数编程
weixin_40719714的博客
06-19 324
函数式编程的好处是什么？ 函数式编程是一种编程模式，在这种编程模式种最常用函数和表达式，函数式编程把函数作为一等公民，强调从函数的角度考虑问题，函数式编程倾向用一系列嵌套的函数来解决问题。 函数式编程让我们的代码更清晰，每个功能都是一个函数。 函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。 React框架也是函数式编程，所以说优势在大型多人开发的项目中会更加明显，让配合和交...
由重构react组件引发的函数式编程的思考
weixin_34297704的博客
07-28 83
对于高阶组件的使用场景如果有相关经验的或者有不同的见解的希望能够在我的博客下面留言 最近在重构react组件时，学习了一些高阶组件的编写思路，其实是由高阶函数沿伸而来。一般情况我们编写一个react组件大致样子如下： class App extends Component { constructor(props){} li...
React面向组件化编程
叁拾博客
05-27 181
1、组件类型 1、函数式组件 <script type="text/babel"> //定义函数式组件 function Demo() { return <h2>我是用函数定义的组件（适用于简单组件的定义）</h2> } //渲染函数组件到页面 ReactDOM.render(<Demo/>,document.getElementById('example1')) </script>
react 实现函数组件
tankpanv的博客
01-08 939
如何创建函数组件 箭头函数形式 const Hello = (props) => { return <div>{props.message}</div> } // 可以简写成 const Hello = props => <div>{props.message}</div> function 形式 function Hello(props) { return <div>{props.message}</div>
react函数组件使用react-neditor
最新发布
11-15
下面是一个使用React函数组件和react-neditor的示例： 首先，我们需要安装react-neditor： ```shell npm install react-neditor --save ``` 然后，我们可以在我们的React函数组件中导入并使用它： ```jsx import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值