react 开发中的问题简记

1、什么时候用props 什么时候用state ？

　　不能使用props：当页面组件存在URL跳转问题时候，原因：若单独刷新，他会报错，拿不到前面的数据；

　　使用props场景：当组件为页面组件的一部分即没有专有的URL配置的时候可以使用。

　　state：保持当前状态请求一般都会放在state里。

2、开发中遇到的问题，路径状态改变前一个状态不会消失(BUG) 例如：弹出浮层；

　　利用react中的周期函数：componentWillReceiveProps(nextprops)以下为传递的请求路径不一致调用

　　componentWillReceiveProps(nextprops){if(nextprops.location.pathname != this.props.location.pathname ){}}

3、iframe:“浏览器中的浏览器“:

　　解决微信浏览器头部标题不能更改的问题。

4、项目开发部署：

　　jenkins的配置构建后台管理nginx的配置 ssh远程连接服务器命令；

5、既然有了node本地服务器调试为什么要部署开发服务器？

　　为了走一遍线上的流程，因为很多问题在本地有可能不会被发现；

时间： 2024-10-07 19:59:24

react 开发中的问题简记的相关文章

React开发中使用fetch进行异步请求

React开发中使用fetch进行异步请求最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单.合理的方式来支持跨网络异步获取资源. 这种功能以前是使用 XMLHttpRequest实现的.Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers.Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展. 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同: 当接收到一个代表错误

react开发中的总结技巧

经过一段时间的react开发,自己总结了一些小习惯,自动构建webpack #### 1. 组件命名文件夹一个组件一个文件夹,可读性高,结构清晰 ```js 文件夹:Danamic(组件首字母大写) index.jsxstyle.lessdata.js ```引用 : import Danamic from './Danamic' webpack能自动识别文件夹内index文件 (index首字母只能小写) React 的 JSX 里**约定分别使用首字母大.小写来区分本地模块的类和 HTML

react开发中如何使用require.ensure加载es6风格的模块

1.问题提出:想通过require.ensure加载es6风格的模块? 2.出现问题:import方式本身就是静态设计方式.如果require进来的是commonjs模块或者amd则没问题,但项目只想es6一个书写风格,行吗? 遗憾的是:一般语言编译工具(如babel),不支持直接require一个es6风格的React组件. 怎么办?? 3.react代码分割方式: react代码分割常见使用router方式,但是单页面应用,不打算router下,可以用require.ensure进行按需加载

React开发中的坑

1.React Router4的传值方式: (1)内部数据传递:刷新后不保存. //需要跳转的组件 import {withRouter} from "react-router-dom"; export default withRouter(组件名); this.props.history.push({ pathname: "路径", state: 数据 //整个传过去,接受到的也是完整的数据 }) //路径的组件 this.props.location.state

React开发和模块管理的主流工具——Webpack

webpack 前端模块管理和打包工具原址:http://www.infoq.com/cn/articles/react-and-webpack CommonJS和AMD是用于JavaScript模块管理的两大规范,前者定义的是模块的同步加载,主要用于NodeJS:而后者则是异步加载,通过requirejs等工具适用于前端.随着npm成为主流的JavaScript组件发布平台,越来越多的前端项目也依赖于npm上的项目,或者自身就会发布到npm平台.因此,让前端项目更方便的使用npm上的资源成为

React开发神器Webpack

编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native.React Canvas等也层出不穷.InfoQ精心策划“深入浅出React”系列文章,为读者剖析React开发的技术细节. 上一篇我们对React有了一个总体的认识,在介绍其中的技术细节之前,我们首先来了解一下用于React开发和模块管理的主流工具Webpack.称之为React开发神器有点标题党了,不过Webpack确实是笔者见过的功能最为强大的前端模块管理和打包工具

React在开发中的常用结构以及功能详解

一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: import reqwest from 'reqwest'; import React from 'react'; import ReactDOM from 'react-dom'; var Header = React.createClass({ handleClick:function(){ conso

react项目开发中出现浏览器翻译功能造成的bug

最近使用react开发一个项目时,测试提出一个bug,说是在某些浏览器上面本来是序号‘’5‘’变成了大写的‘’五‘’ 自己却一直无法重现,最后发现是测试人员浏览器打开了翻译功能解决方案: 解决思路是将index.ejs的html lang='en'改为lang='zh',这样设置网页就不会自动翻译了,就是翻译了也只是中文翻译成中文,不会再出现大写五了. 后续: 不过如果自己还将网页翻译为中文,列表页存在一个问题就是,翻页的时候列表数据刷新不出来右侧数据有的没有被渲染成功原文地址:https

使用React开发的一些注意要点

react是R系技术栈中最基础同时也是最核心的一环,2年不到获取了62.5k star(截止到目前),足可见其给力程度.下面对一些react日常开发中的注意事项进行罗列. React的组件生命周期 react主要思想是构建可复用组件来构建用户界面.在react里面一切皆组件.每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法,分别在哪个阶段执行.下面附上一张RN的生命周期图: 组件第一阶段:初始化.渲染以及装载完成: 组件第二阶段:组件运行时候的状态 ①:状态变化引发组件的更新