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的生命周期图: 组件第一阶段:初始化.渲染以及装载完成: 组件第二阶段:组件运行时候的状态 ①:状态变化引发组件的更新