reactjs_reactjs- - CSDN
  • 一. State和 Props  state是状态机。  应该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。  不应该包括:计算所得数据、React组件(在...

    一.  State和 Props

          state是状态机。

          该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。

          不应该包括:计算所得数据、React组件(在render()里使用props和state来创建它)、基于props的重复数据(尽可能保持用props来做作为唯一的数据来源,把props保存到state中的有效的场景是需要知道它以前的值得时候,因为未来的props可能会变化)。

     

          props: 父级向子级传递数据的方式。

         

    二.  有状态组件和无状态组件(纯函数组件)

          有状态组件

          通过React.createClass或者es6的class继承React.Component创建的组件。特性:具备完整的生命周期及实例化过程、支持this及ref指向。

     

          无状态组件:

          即statelesscomponent( pure function Component)。以函数返回值方式方式创建的组件。特点: 无实例化过程及生命周期、无this及ref指向、函数接受props及context两个参数。

     

          实践模式

          创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props传给子级。有状态的组件封装了所有的用户交互逻辑,state中处理状态的变化, 而这些无状态组件只负责声明式地渲染数据.



    三.  受控组件、非受控组件及混合组件

          有许多的web组件可以被用户的交互发生改变,比如:<input>,<select>。这些组件可以通过输入一些内容或者设置元素的value属性来改变组件的值。但是,因为React是单向数据流绑定的,这些组件可能会变得失控:

          1.一个维护它自己state里的value值的<Input>组件无法从外部被修改

          2.一个通过props来设置value值的<Input>组件只能通过外部控制来更新。

     

          受控组件:

          一个受控的<input>应该有一个value属性。渲染一个受控的组件会展示出value属性的值。 
          一个受控的组件不会维护它自己内部的状态,组件的渲染单纯的依赖于props。也就是说,如果我们有一个通过props来设置value的<input>组件,不管你如何输入,它都只会显示props.value。换句话说,你的组件是只读的。

          在处理一个受控组件的时候,应该始终传一个value属性进去,并且注册一个onChange的回调函数让组件变得可变。

     

          非受控组件

          一个没有value属性的<input>就是一个非受控组件。通过渲染的元素,任意的用户输入都会被立即反映出来。非受控的<input>只能通过OnChange函数来向上层通知自己被用户输入的更改。

     

          混合组件

          同时维护props.value和state.value的值。props.value在展示上拥有更高的优先级,state.value代表着组件真正的值。

          目的:

          1、支持传入值; 
          2、可控:组件外部修改props可改变input组件的真实值及显示值; 
          3、非可控:输入框中输入值,可同时改变input组件的真实值及显示值。




    四.  redux和dva

          Redux

          1.Actions、Reducers 和 Store

          action可以理解为应用向 store 传递的数据信息(一般为用户交互信息)。在实际应用中,传递的信息可以约定一个固定的数据格式,比如: Flux Standard Action。 dispatch(action) 是一个同步的过程:执行 reducer 更新 state -> 调用 store 的监听处理函数。如果需要在 dispatch 时执行一些异步操作(fetch action data),可以通过引入 Middleware 解决。

     

          reducer实际上就是一个函数:(previousState, action) => newState。用来执行根据指定 action 来更新 state 的逻辑。reducer 不存储 state, reducer 函数逻辑中不应该直接改变 state 对象, 而是返回新的state 对象。

         

          store是一个单一对象,redux中只有唯一一个store实例。主要作用:

               1.管理应用的 state

               2.通过 store.getState() 可以获取 state

               3.通过 store.dispatch(action) 来触发state 更新

               4.通过 store.subscribe(listener) 来注册state 变化监听器



    b. Dva

          数据流向

    数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致(也是来自于开源社区)。





    Models

    State

    type State= any

    State 表示 Model的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutabledata)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

    在 dva 中你可以通过 dva 的实例属性 _store 看到顶部的 state数据,但是通常你很少会用到:

    constapp=dva();
    console.log(app._store); // 顶部的 state 数据

    Action

    typeAsyncAction = any

    Action 是一个普通 javascript对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。

    dispatch({
      type: 'add',
    });

    dispatch 函数

    typedispatch = (a: Action) => Action

    dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。

    在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者Effects,常见的形式如:

    dispatch({
      type:'user/add', // 如果在 model 外调用,需要添加 namespace
      payload: {}, // 需要传递的信息
    });

    Reducer

    typeReducer<S, A> = (state: S, action: A) => S

    Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

    Reducer 的概念来自于是函数式编程,很多语言中都有 reduce API。如在 javascript 中:

    [{x:1},{y:2},{z:3}].reduce(function(prev, next){
        returnObject.assign(prev, next);
    })
    //return {x:1, y:2, z:3}

    在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用immutabledata,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。

    Effect

    Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。

    dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读Mostlyadequate guide to FP,或者它的中文译本JS函数式编程指南

    Subscription

    Subscriptions 是一种从  获取数据的方法,它来自于 elm

    Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

    importkeyfrom'keymaster';
    ...
    app.model({
      namespace:'count',
      subscriptions: {
        keyEvent(dispatch) {
          key('+up, ctrl+up', () => { dispatch({type:'add'}) });
        },
      }
    });

    Router

    这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 HistoryAPI 可以监听浏览器url的变化,从而控制路由相关操作。

    dva 实例提供了 router方法来控制路由,使用的是react-router

    import { Router, Route } from'dva/router';
    app.router(({history}) =>
      <Router history={history}>
        <Route path="/" component={HomePage} />
      </Router>
    );

    RouteComponents

    组件设计方法中,我们提到过Container Components,在 dva 中我们通常将其约束为 Route Components,因为在 dva 中我们通常以页面维度来设计 Container Components。

    所以在 dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)。

     

    五.  hoc

          HOC(全称Higher-ordercomponent)是一种React的进阶使用方法,主要还是为了便于组件的复用。HOC就是一个方法,获取一个组件,返回一个更高级的组件。

     

          在React开发过程中,发现有很多情况下,组件需要被"增强",比如说给组件添加或者修改一些特定的props,一些权限的管理,或者一些其他的优化之类的。而如果这个功能是针对多个组件的,同时每一个组件都写一套相同的代码,明显显得不是很明智,所以就可以考虑使用HOC。

     

          一个最简单的HOC实现是这个样子的:




    HOC可以做什么?

          代码复用,代码模块化

          增删改props

          渲染劫持

     

          增删改props

          可以通过对传入的props进行修改,或者添加新的props来达到增删改props的效果。

     

          比如你想要给wrappedComponent增加一个props,可以这么搞:


    这样,你就可以在你的组件中使用message这个props:




    渲染劫持

          这里的渲染劫持并不是你能控制它渲染的细节,而是控制是否去渲染。由于细节属于组件内部的render方法控制,所以你无法控制渲染细节。

     

          比如,组件要在data没有加载完的时候,现实loading...,就可以这么写:




    这个样子,在父级没有传入data的时候,这一块儿就只会显示loading...,不会显示组件的具体内容


    六. 项目中的实践

          1.合理使用有状态组件及无状态组件。在使用redux或者dva的场景下,理论上所有的组件都可以封装为无状态组件(少数需要生命周期控制或者上文提到的混合式组件除外),model中封装数据、异步effects及同步reducers,通过connect绑定到对应的组件上。

          最佳实践: router中getcomponent中定义的组件我们称之为路由组件,一般路由组件会通过connect绑定model中定义的state及组件中定义的方法到该组件的props上。其他方式定义的为非路由组件,非路由组件尽量避免使用connect,而是通过路由组件或者其他上层通过props传递数据进行渲染。

     

          2.理解subscription, effects及reducers中各自的功能职责。

     

          3.package.json中定义的dependency,需要深入研究,避免重复造轮子。

     

          4.全局观及合理的组件规划。


    展开全文
  • 一、React的家世背景 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月...

    一、React的家世背景

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

    Facebook的设计理念是独立、小巧、快速、创新,而React的特点也正说明了这一点。

    二、React 更“轻”的MDV框架

    先来说一下什么是MDV吧,MDV即Model Driven View,根据model动态生成view。MDV框架将程序员从传统手动渲染dom节点和事件绑定中解放了出来,大大提高了开发效率。

    React更“轻”,这个"更"是有对比含义的,相对于AngularJs的双向数据流,ReactJs的单向数据流显然是更轻量级,而且React维护自己的VTree(虚拟Dom树),可以更快的渲染dom节点。据说,react渲染的界面,fps可以保持在60左右,这一点使得react特别适合于制作游戏。在react刚推出的时候,有测试指出react的性能要比angular高20%左右。

    但是,AngularJs的数据交互可以双向进行,可以用于CURD,应用易于接受用户的自定义以及个人数据。当然, 毕竟 React是用于“render”的,view中最关键的是管理组件状态变化,而React在这一点上做的比AngularJs好很多。

    在React中,对象的状态使用this.state表示,对象的初始状态设置使用getInitialState,设置状态使用setState,数据使用props管理,DOM操作和事件监听则类似于jquery。

     

    三、使用React制作简易悬浮框

    index.html

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
    	<link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    	<div id="container"></div>
    	<div id="layer"></div>
    </body>
    	<script type="text/javascript" src="ReactJs/react.min.js"></script>
    	<script type="text/javascript" src="ReactJs/react-dom.min.js"></script>
    	<script type="text/javascript" src="ReactJs/browser.min.js"></script>
    	<script type="text/javascript" src="jquery/jquery.min.js"></script>
    	<script type="text/babel" src="js/common.js"></script>
    </html>

    style.css

    #modal{
    	width:400px;
    	height:210px;
    	margin-left: auto;
    	margin-right: auto;
    	padding-left:10px;
    	padding-right:10px;
    	border:1px solid #999;
    	border-radius: 10px;
    	background-color: #fff;
    	display:none;
    }
    #modal .btn{
    	float:right;
    	margin-right:10px;
    }
    #layer{
    	width:100%;
    	height:100%;
    	position:fixed;
    	top:0;
    	left:0;
    	z-index:-1;
    }

    common.js (React创建组件)

    var BootstrapButton=React.createClass({
    	render:function(){
    		return (
    			<a 	{...this.props}
    				href="javascript:;" 
    				role="button" 
    				className={'btn '+this.props.className}/>
    		);
    	}
    });
    
    var BootstrapModal=React.createClass({
    	render:function(){
    		return (
    			<div id="modal" ref="root">
    				<h1>Hello world</h1>
    				<hr/>
    				<p>This is a test!</p>
    				<hr/>
    
    				<BootstrapButton className="btn-primary" onClick={this.handleConfirm}>
    				Confirm
    				</BootstrapButton>
    			</div>
    		);
    	},
    	handleConfirm:function(){
    		this.close();
    	},
    	open:function(){
    		$(this.refs.root).show();
    
    		$("#layer").css("background","rgba(112,112,112,0.6)");
    	},
    	close:function(){
    		$(this.refs.root).hide();
    
    		$("#layer").css("background","rgba(0,0,0,0)");
    	}
    });
    
    var ModalWidget=React.createClass({
    	render:function(){
    		return(
    			<div>
    				<BootstrapButton className="btn-default" onClick={this.showModal}>
    				show
    				</BootstrapButton>
    
    				<BootstrapModal ref="modal">
    				</BootstrapModal>
    			</div>
    		);
    	},
    	showModal:function(){
    		{this.refs.modal.open()};
    	}
    });
    
    ReactDOM.render(<ModalWidget/>,$("#container")[0]);

     

     

    展开全文
  • reactJS项目搭建

    2018-08-27 13:58:26
    2.node.js安装好后,可用npm命令搭建项目: npm install -g create-react-app 比如创建名为project01的项目,切换到自己想要存放项目的文件夹下,输入以下代码创建项目: create-react-app project01 ...

    1.首先要下载安装node.js:https://nodejs.org/en/download/

    2.node.js安装好后,可用npm命令搭建项目:

    npm install -g create-react-app

    比如创建名为project01的项目,切换到自己想要存放项目的文件夹下,输入以下代码创建项目:

    create-react-app project01

    切换到该项目文件夹下:

    cd project01

    运行查看该项目:

    npm start

    即可看到该项目的默认内容:

    展开全文
  • web端三大框架react、vue和angular,下面是对react.js的一些总结。 一、环境搭建 1、npm搭建项目 推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(cnpm是淘宝的npm镜像,与npm有些差异,...

    web端三大框架react、vue和angular,下面是对react.js的一些总结。

    一、环境搭建

    1、npm搭建项目

    推荐使用npm搭建项目环境,如果网速过慢,可是使用cnpm进行项目的搭建(cnpm是淘宝的npm镜像,与npm有些差异,有些模块无法下载或无法正常使用)。

    cnpm install -g create-react-app
    create-react-app my-app
    cd my-app
    npm start
    • 1
    • 2
    • 3
    • 4

    打开浏览器,输入http://localhost:3000可以看到系统默认生成的页面了。 
    这里写图片描述

    2、推荐使用的项目结构

    https://git.coding.net/yibingCoding/ReactLearn.git 
    可以通过git clone方式下载项目结构。

    二、目录结构与各文件功能

    1、目录结构

    这里写图片描述 
    1、index.html文件为项目的总入口,CDN引入的资源可以放在此文件中。 
    2、package.json文件是模块功能配置,使用npm install可生成node_modules文件夹,所有模块功能所需要的资源都存储在这个文件夹中。 
    3、routes.js文件是路由配置文件,路由功能是三大前端框架的特色(具体用法下面会详细说)。 
    4、Home.js文件是项目结构初始化放上去的界面。

    三、react.js的第一个dome

    在Home.js中编写代码,代码如下:

    import React,{ Component } from 'react'
    import demo1Image from '../../image/demo1Image.jpg';
    class Home extends Component {
      render() {
        return (
          <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}>
            这是第一个demo
            <img src={demo1Image} style={{width:"300px",height:"300px"}} alt=""/>
          </div>
        )
      }
    }
    export default Home
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    效果如下: 
    这里写图片描述

    展开全文
  • 什么是React.js

    2018-09-19 15:39:16
    React作为JavaScript库的三大主流框架之一,值得前端工程师的进一步学习与探讨。 React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。...
  • react.js完整项目

    2020-07-30 23:32:06
    前端fackbook的react框架,包括es6,react,redux,typescript,是一下完整的项目
  • 一看就懂的ReactJs入门教程(精华版) 2015-07-21 10:39 编辑: cocopeng 分类:HTML5 来源:雲霏霏的博客 1 264498 ReactReactJS 招聘信息: app推广与运营技术合伙人移动应用开发项目...
  • JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。但哪一款最适合你? JavaScript越来越受欢迎,许多科技巨头正在从中获益。每天都会出现大量的框架和语言,我们无法跟上所有这些框架和语言的...
  • ReactJS Blueprints《ReactJS蓝图》: 1、用世界上最火的Javascript库来开发Web App。 2、学习如何加速你的开发速度并节省宝贵的时间。 3、用step-by-step方式的教程让你轻松学会如何解决现实世界中的问题。 The ...
  • React中reactjs-swiper的使用与入坑 React中reactjs-swiper的使用与入坑 本文最先参考了https://www.cnblogs.com/cbp-jltx/p/9681838.html 但是,也不知道什么原因,swiperOptions始终不起作用,不知道是不是我自己...
  • 在诸如Jquery,AngularJS,BootStrap等各种前端框架或库充斥市场的情况下,由Facebook...在使用中理解ReactJS、利用ReactJS更快速的实现你的组件化开发 解压密码:javazx.com 解压密码:javazx.com 解压密码:javazx.com
  • ReactJS中文基础视频教程(打包下载)ReactJS视频教程下载ReactJS基础视频教程
  • 上篇文章中写了流行的前端UI几大框架,发现大部分评价都是Vue的UI组件库,从评论中得知漏掉了很多,也有人问React ui,自己就搜索总结下适应于ReactJS的UI组件库。 一.Material-UI   Material-UI是一款React...
  • 在使用了一段时间Reactjs后,渐渐感觉到它的局限性。Reactjs的理想是好的:只学一次,通吃Web端和移动端。也大大改进了Web端开发的杂货铺状态(html,css,js以及各类自定义语言混合),采用Reactjs让前端javascript...
  • 由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花...
  • 一看就懂的ReactJs教程

    2016-09-11 15:43:06
    自从接触了ReactJSReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略 ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的...
  • 在诸如Jquery,AngularJS,BootStrap等各种前端框架或库充斥市场的情况下,由Facebook的优秀程序员...在使用中理解ReactJS、利用ReactJS更快速的实现你的组件化开发。 课程目录 6小时学习时长 1.ReactJS简介 20:0...
  • 作为前端框架的三剑客之一的Reactjs,得到了facebook社区大力支持,有着丰富的UI框架组件,用户群也大大多余vue,ng,算是老牌的前端框架。vue和reactjs的异同特性,网上也总结了非常多,但大部分都是概念性的...
  • 前一章我们搭建了reactjs的标准工程,本章节我们基于标准工程的demo应用,了解react的 渲染和JSX语法。 二、渲染 1、在标准工程的public/index.html下 <div id="root"></div> 该div是我们整个应用...
  • ES6写法的reactjs

    2017-07-07 12:36:02
    reactjs是目前最火的单页面框架,面向ES6语法,使用JSX语法进行组件化开发。JSX语法是把js和html混合起来编写代码,其核心就是以“<”“>”包裹html,以“{ }”来包裹js语法。只需要多写几遍就行,个人觉得没必要...
1 2 3 4 5 ... 20
收藏数 14,254
精华内容 5,701
关键字:

reactjs