React系列之开发大型网站最佳实践

React | 从头打造个人网站(超详细) 哈喽🤗,这篇博客从0开始教大家创建自己的网站,包含个人网站,商用网站等,并且提供模板类型,提供修改模块样本~最终效果那就开始吧👩‍💻👨‍💻。 阅读详情

React最佳实践

author huangteng


前言

react构建应用的细枝末节的问题。看起来无关痛痒,实则关系到整个应用的结构是否合理,实现是否合理,性能是否优化,小细节看出大问题。
整理出一些实践细节,满满的都是套路。不分顺序。

实践

1. 我们是可以在componentDidMount或者componentDidUpdate中去执行ajax  获取数据,但是这样代码臃肿,结构混乱,性能降低,交给rudex吧,ajax的操作都放到action中不是最佳实践吗?

2.  事实证明ajax越来越让我们难以接收了,是不是考虑替代方式,比如websocket,或者是我想说的window.fetch(),虽然只有chrome和ff支持,不过有polyfill嘛,兼容不是问题啊

3.  生命周期函数中的逻辑写太多了不好吧亲,可以想法子丢在render中一部分啊。

4.  this.state = { } 中不要有计算哦亲,什么obj.name + “sss”之类的

5.  其实应该少用state, 用props 挺好

6.  开发过程中对组件树的良好设计可以事半功倍

7.  可以忘记吃饭也不要忘记PropTypes 验证哦

8.  能用三元判断符,就不用 If ,直接放在 render()里

9.  不要把 display logic 写在componentWillReceiveProps或componentWillMount中,把它们都移到 render()中去。(与第3重复,只是强调一下)

10.  合理运用context可以简化一下开发

11.  pureRender优化可以减少重复加载的浪费

12.  immutable data的使用是必须的

13.&

Bootstrap和ReactJS的最佳实践 本文详细介绍了Bootstrap框架中关于排版、导航栏、表单、按钮组件的使用方法和最佳实践。同时,探讨了ReactJS项目中的一些注意事项,并推荐了相关的学习资源。 阅读详情

相关推荐

react-结合react全家桶antd实现的企业级网站开发模板

结合react全家桶 antd实现的企业级网站开发模板

5个IO口驱动188数码管:查理复用算法在TM52F1363上的极致应用

本文深入解析了如何利用查理复用算法,在TM52F1363单片机上仅用5个IO口驱动188数码管。通过精密的硬件连接与软件时序控制,结合高阻态和动态扫描策略,实现了在极致资源限制下的稳定显示,为成本敏感型嵌入式产品提供了高效的IO复用解决方案。

numpy6sculptor的博客 476

串口调试神器诞生记:我是如何用Cursor+AI自动生成C#上位机的(含VSCode插件清单)

本文详细介绍了如何利用Cursor和AI技术快速开发C#上位机程序,实现高效的串口通讯调试。从开发环境搭建到代码自动生成,再到性能优化和功能增强,全面展示了AI辅助开发在串口调试中的实际应用和显著效率提升。

weixin_28340315的博客 298

如何使用obspy下载地震波形数据

如果你是地震研究学者,或者需要进行地震方面的研究,那么地震数据下载是一个必不可少的流程,本文将告诉你如何使用obspy下载想要的地震数据

monsterk1的博客 2074

在中国大陆使用 LiveKit 集成阿里云语音交互服务

通过集成阿里云的语音和模型服务,我们可以快速构建出适合中国用户的 LiveKit 智能语音应用。LiveKit Agents 框架的模块化设计使得替换底层服务变得异常简单,只需要更换相应的插件实例即可。使用 WebSocket 版本的阿里云 ASR 接口以获得更低的延迟。利用通义千问的 Function Calling 能力对接智能家居或企业内部 API。结合 LiveKit 的视频处理能力,打造具备视觉交互的数字人。希望这篇博客能为你在实时音视频与 AI 结合的探索之路上提供帮助!

星空漫野 1234

华为OD面试八股文嵌入式C语言基础问题及答案(一)

本文总结了C语言编程中的10个关键知识点:1.宏定义MIN的实现方法;2.嵌入式无限循环的两种写法;3.变量a的8种不同定义方式;4.static关键字的三种作用;5.const关键字的含义和使用场景;6.volatile关键字的含义及三个应用实例;7.变量存储位置(栈区、静态区、堆区);8.32位系统指针位数;9.局部与全局变量重名规则;10.引用与指针的三点区别。这些内容涵盖了宏定义、变量声明、存储类别、指针等C语言核心概念,对嵌入式开发和系统编程具有重要参考价值。

m0_50382756的博客 160

2025年华为杯中国研究生数学建模竞赛E题 高速列车轴承智能故障诊断问题 思路+代码

all_data, file_info = preprocessor.load_mat_files(file_list[:50]) # 加载前50个文件作为示例。[y_source, y_source, domain_labels], # 注意:这里使用伪标签。X_target = np.random.randn(100, X_source.shape[1], 1) # 示例数据。"""构建CNN-Transformer混合模型""""""构建Transformer模型"""

YOLO 1046

Linux V3H 平台开发系列讲解(串行解串篇)2.2.2 MAX9296 MAX96705 GMSL1 续篇--串行器提前配置

本文详细介绍了在Linux v3h平台上,针对Max9296解串器和解串器max96705的详解配置,验证可出图,内容包括串行器解串器介绍、链路框架、硬件连接、速率配置,以及遇到的图像异常问题及解决方法。

xian18809311584的博客 536

PostgreSQL核心原理:数据库崩溃恢复的唯一真相详解

PostgreSQL崩溃恢复机制通过WAL日志确保数据一致性和持久性。核心流程包括:触发恢复(非正常关闭时)、读取控制文件获取检查点LSN、顺序扫描WAL日志进行Redo阶段重做已提交事务、利用MVCC标记未提交事务为ABORTED实现逻辑撤销,最后执行检查点完成恢复。该机制依赖WAL原子性、检查点锚点和无Undo的可见性模型三大支柱,保证即使系统崩溃也能恢复到逻辑一致状态。关键设计包括延迟写入、LSN顺序控制和FPW防部分写,最终通过确定性重放实现ACID特性。

数据知道的博客 2656

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

上一篇: React系列之生命周期深入解析
下一篇: 一个不一样的ajax
波比小金刚
博客等级 码龄11年 41粉丝 67原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值