围绕React衍生出的思考

最新推荐文章于 2025-08-17 17:18:40 发布
最新推荐文章于 2025-08-17 17:18:40 发布
阅读量372 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： React 学习笔记 文章标签： React 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44956861/article/details/95644685
博客介绍了React开发相关知识。它是声明式开发，可与其他框架并存，采用组件化且组件名大写，遵循单向数据流。React是视图层框架，处理页面和数据渲染，复杂传值需flex redux辅助。还提及React的函数式编程，利于自动化编程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.以前使用jequery，原生JS操作DOM的写法叫做命令式的编程
2.React是一种声明式的开发
3.React可以与其他框架并存，如index中，react只会管理在index.js中挂载的dom，其他的标签都可以使用其他的库或者框架进行编辑
4.React中的组件化，组件的命名都是大写开头
5.单向数据流
父组件给子组件传值允许，但绝不允许子组件去更改父组件的值 在子组件中，父组件传过来的值是只读属性的
如果我实在想在子组件中修改父组件，通过子组件调用父组件的方法进行修改，这里传方法请注意this指向问题
6.视图层的框架React
在这里插入图片描述
如果只使用react去进行复杂的传值是非常的麻烦的，因此react只是一个视图层的框架，只帮你解决页面和数据渲染的，如果是数据传递，那对不起react我不管 因此我们需要使用flex redux数据框架辅助我们进行开发
7.React的函数式编程
如刚刚所写的函数直接往里面写JSX代码，然后去调用这个函数
面向测试的开发流程，如果都是函数很容易进行自动化编程

独立开发者如何利用开源项目建立个人品牌并变现
AI天才研究院
06-23 482
在技术圈，“酒香也怕巷子深”的时代早已过去。独立开发者（Independent Developer）作为技术创新的重要力量，如何通过开源项目被看见、被认可，并最终实现价值变现？本文将围绕“开源→品牌→变现”的全链路，提供可落地的方法论与真实案例参考。本文将从“为什么做”（价值与趋势）、“怎么做”（开源项目运营）、“如何变现”（具体模式）三个维度展开，结合实战案例与工具推荐，帮助读者构建从0到1的开源品牌建设能力。开源项目：你的“技术名片”，通过代码和社区积累口碑。个人品牌。
开源创富：独立开发者的逆袭之路
AI天才研究院
07-22 1081
在GitHub拥有1亿开发者、全球开源软件市场规模突破1500亿美元的今天，开源已不再是“为爱发电”的小众游戏。本文将带你走进独立开发者的开源创富生态：从理解开源的“底层逻辑”到设计可持续的盈利模式，从构建有价值的技术项目到运营高粘性用户社区，结合20+真实案例与实战方法论，揭秘普通人如何通过开源实现技术变现与职业自由。无论你是刚入门的开发者，还是想探索第二曲线的技术人，这篇文章都将为你打开一扇通往“代码即资产”的新大门。开源创富的本质：用技术解决问题→积累用户→设计付费转化路径→反哺开发；
React学习资源汇总
物以稀为贵yeah
12-06 4240
React是如今最热门的前端框架之一，它设计思路独特，性能卓越，逻辑简单，受到了广泛开发者的喜爱,最近有项目需要用到React，所以现在开始恶补，把自己学习React的一些学习资料总结一下。 React 官方 官网地址：http://facebook.github.io/react/ Github地址：https://github.com/facebook/react 设计思想学习React之前，我
自学react留感（上）
可了不得
01-30 1065
React 起源于 Facebook 的内部项目，作用是：架设ins的网站，优点是：他是声明式设计，高效，灵活。 react只是dom的一个抽象层，并不是web应用的完整解决方案，因为react有两个方面没涉及，一个是代码结构，还有一个是左键中的结构。react衍生出来的react native项目目标更宏伟，希望用web app的方法去写native app。 一，React特点： 声明式
react简书项目学习笔记6围绕react衍生的思考
MeiLuan_yahoho的博客
01-29 441
1.react是一种声明式的开发 声明式编程是一种编程范式，与命令式编程相对立。它描述目标的性质，让计算机明白目标，而非流程。声明式编程不用告诉计算机问题领域，从而避免随之而来的副作用。而命令式编程则需要用算法来明确的指出每一步该怎么做。 2.react可以与其他框架并存 在index.html文件中，react只管理id="root"里的代码的渲染,其他框架可以操作其他部分的代码 3.组件化 p...
围绕react衍生出来的思考
weixin_30251587的博客
03-10 282
优势一、声明式开发 首先react是声明式的开发方式，这个与之对应的是命令式开发方式，之前在用jquery写代码的时候，都是直接来操作dom，直接操作dom的这种编程方式，我们把他叫做命令式的编程，也就是我要创建一个页面，我要一点点的告诉dom,你要怎么去挂在，你要怎么去做，这种编程方式我们叫做命令式的编程。回头想想，我们代码里面有60%到70%的代码都在对dom进行操作。 ...
React - review 1
m0_48942526的博客
02-04 503
React - review 1一、 React 简介二、 React 开发环境准备三、 React 工程目录文件简介四、React 中的组件五、Jsx 语法需要注意六、围绕 React 衍生出来的思考七、propTypes 与 DefaultProps 的应用八、props、state 与 render 函数 一、 React 简介 React Js => 可以用 React 的语法来编写一些网页的交互效果 React Native => 可以让我们借用 React 语法编写原生的 app
初探react，用react实现一个todoList功能
moandaylab
10-12 3818
初探react，用react实现一个todoList功前言一、react基础1. react简介2. 开发环境搭建3. 工程目录文件简介4. react中最基础的JSX语法二、使用react编写TodoList功能1. 页面构思2. React中的响应式设计思想和事件绑定3. 实现TodoList新增删除功能（1）新增功能（2）删除功能三、对TodoList功能进行进阶操作1. JSX语法细节补充（1）自动转义（2）光标聚焦2. 拆分组件与组件之间的传值3. TodoLi
React基础
Jack汪喆的技术分享栏
08-04 515
1.使用React编写TodoList //TodoList.js import React ,{ Component, Fragment}from 'react'; class TodoList extends Component{ render(){ return( <Fragment> <in...
【笔记】react 学习与记录
daddykei的博客
07-28 193
这里写目录标题一级目录起步src-> App.js、index.js响应式设计思想和事件绑定二 一级目录 起步 npm i -g create-react-app create-react-app todolist npm run start src-> App.js、index.js import {Component} from 'react'; //等价于 import React from 'react'; const Component = React.Component 所以
React16.4开发简书项目 从零基础入门到实战-笔记-02
mysteryflower的专栏
04-23 783
第3章 React基础精讲 本章通过TodoList功能的实现，给大家完整介绍React的基础语法，设计理念以及围绕React展开的一些编程思维。 3-1 使用React编写TodoList功能 3-2 React 中的响应式设计思想和事件绑定 3-3 实现 TodoList 新增删除功能 3-4 JSX语法细节补充 3-5 拆分组件与组件之间的传值 3-6 TodoList 代码优化 3-7 ...
「前端」React 16.4 开发简书项目 从零基础入门到实战（慕课网个人学习笔记）持续更新中……
Jack's Blog
02-27 4188
2-3 工程目录文件简介 PWA progressive web application：通过写网页的形式写手机APP registerServiceWorker：将网页上线到支持https协议的服务器上，访问一次即可离线访问 index.js：整个React项目的入口文件 index.html：负责页面显示的html内容 2-4 React中的组件 import { Compon...
GitHub Trending项目变现实录：从代码到现金
最新发布
AI天才研究院
08-17 673
在GitHub这个全球最大的代码托管平台上，每天都有无数优秀项目登上Trending榜单，它们代表着最前沿的技术趋势和开发者智慧。然而，绝大多数开源项目都面临着一个共同挑战：如何将优秀的代码转化为可持续的收入来源。本文将带领读者踏上一段从"代码到现金"的开源创业之旅，深入剖析GitHub热门项目的商业化路径。我们将系统探讨开源项目的价值评估、商业模式设计、用户增长策略和变现实施步骤，通过真实案例分析成功与失败的经验教训，并提供一套完整的开源项目商业化实操指南。
前端react，vue导出word的几种方法（可以导出图片）
weixin_44956861的博客
09-30 8940
mhtml-to-word导出word： 方法详情请看这里 1.安装环境 npm install mhtml-to-word 2.引入使用 import { exportWord } from mhtml-to-word 3.直接使用（浏览器环境下的使用，node环境下请点击方法一详情） 这里我们给出百度模板的使用演示 （1）引入我们在详情链接中的百度模板的文件 import baidu f...
antd的Form表单控制实例的使用
weixin_44956861的博客
07-14 7975
Form表单的控制实例一、业务常景：二、使用Form表单的实例来解决： 一、业务常景： 遇到一种业务场景，即一个简单的Modal框+ Form的一个组合，仔细思考了一下，和我们平时直接使用Form表单还是有一定的区别，我们通常是通过给Form表单绑定onFinish的回调函数，但是这里的业务需求是在model框上点击确定去提交表单，直接通过onFinish函数去回调是不太可行的。 二、使用Form表单的实例来解决： 打开Antd文档，发现有一个form的实例，这里说的稍稍有的绕，他的意思是你需要使用usF
Antd中Table组件筛选报错：Cannot read property 'toString' of null
weixin_44956861的博客
11-23 6140
由字面意思可以发现这里的record应该是空的 先放解决方法： 在可以搜索的那一列 传递的数据不能有空值！ record所在位置： 关于onFilter是一个搜索函数在antd的API上的文档有 我们打印一下 、 可以看到其中有一个空值，这里就是问题所在 因此：在可以搜索的那一列 传递的数据不能有空值！ 有错误时的表格： 只要那一格不为空即可 ...
React 中class与hook渲染机制方面的一点思考
weixin_44956861的博客
04-24 1636
刷掘金时无意看到了一篇文章：React hooks 怎样做防抖？ 点进去看了一遍么，才发现之前对于hooks仅仅只是会用，对于hook的渲染机制并不十分的了解。 我们先从上篇博客提到防抖来入手，再谈渲染机制。 我们平时是如何写防抖的？ function debounce(fn,delay) { let timer; return function (...arg) { ...
使用React.js去实现一个toDoList
weixin_44956861的博客
07-11 464
1.我们新建一个js文件，之后在index.js中去引入 2.在return()中编写我们的html代码 注意：必须有一个<>是完全包裹整个return()中的内容的这是JSX语法所规定的 与Vue对比：在Vue的compoment组件中 也要求有一个<>完全去包裹<template>标签中的内容 如果我不想让标签元素去占位置，我们直接使用标签 <Frag...
whisper web
03-27
### 关于 Whisper 的 Web 实现及相关项目 Whisper 是由 OpenAI 开发的一种自动语音识别 (ASR) 模型，能够实现多语言、高质量的语音转文字功能。以下是与 Whisper 相关的一些 Web 技术和项目： #### 1. **基于浏览器的 Whisper 应用** 一些开发者已经创建了基于 Web 的 Whisper 集成工具，允许用户通过浏览器上传音频文件并实时将其转换为文本。这些应用通常依赖前端框架（如 React 或 Vue.js）以及后端服务来运行 Whisper 模型。 例如，Hugging Face 提供了一个在线演示平台，支持多种 ASR 模型，包括 Whisper[^3]。该平台允许用户直接上传音频文件或录制麦克风输入，并返回对应的文本结果。 ```javascript // 示例：如何在 JavaScript 中调用 Hugging Face API 进行 Whisper 推理 const fetch = require('node-fetch'); async function transcribeAudio(audioFile) { const formData = new FormData(); formData.append('file', audioFile); const response = await fetch('https://api-inference.huggingface.co/models/openai/whisper-base', { method: 'POST', headers: { Authorization: `Bearer YOUR_API_KEY` }, body: formData, }); const result = await response.json(); console.log(result); } ``` #### 2. **开源项目：Whisper.cpp 和其衍生作品** Whisper.cpp 是一个用于部署 Whisper 模型的轻量级 C++ 实现，它使得模型可以在资源受限的设备上运行，甚至可以直接嵌入到网页中。该项目的一个分支实现了 WASM（WebAssembly），从而让 Whisper 能够完全在客户端执行推理而无需服务器支持[^4]。 - GitHub 地址: https://github.com/ggerganov/whisper.cpp - 使用场景: 可以构建无服务器架构的应用程序，保护用户的隐私数据不离开本地环境。 #### 3. **Phishpedia 对比分析** 虽然 Phishpedia 主要专注于反钓鱼检测领域[^2]，但它同样采用了混合深度学习的方法来进行视觉特征提取和分类。这启发我们思考，在设计类似的语音处理系统时，可以借鉴跨模态的技术思路，比如结合图像和声音信号共同训练更强大的 AI 模型。 --- ### 总结 目前围绕 Whisper 展开的主要 Web 技术方向集中在简化用户体验、降低延迟时间以及增强安全性等方面。无论是利用现有的云服务平台还是探索新兴的边缘计算解决方案，都可以显著提升实际应用场景中的表现效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值