React.js+ReactNative
.NET跨平台
比较认真。编程就是算法和数据结构,算法和数据结构是编程的灵魂。
展开
-
React+BootStrap+ASP.NET MVC实现自适应和组件的复用
1、前端采用bootstrap3进行架构2、后端采用asp.net mvc进行开发开发工具vs2010 mvc4需要安装sp1的补丁。3、js组件的封装采用react新建mvc项目 BootStrapReactAndMVC。在Views\Shared\新建_Layout.cshtml文件。将bootstrap的引用进行添加新建HomeController和ReportController两个C转载 2017-08-08 23:33:56 · 2823 阅读 · 0 评论 -
React高级指南(一)【JSX In Depth】
JSX In Depth从根本上讲,JSX只是React.createElement(component, props, ...children)函数的语法糖。JSX代码:"blue" shadowSize={2}> Click Me/MyButton>会被编译为:React.createElement( MyButton, {color: 'blue', s转载 2017-11-16 10:01:56 · 959 阅读 · 0 评论 -
React高级指南(二)【Typechecking With PropTypes】
随着应用规模的提升,你可以通过类型检测捕捉更多的bug。对于部分应用,你可能需要需要使用类似于Flow或者TypeScript的JavaScript扩展来对你整个应用类型进行类型检测。但即使你不使用这些,React内置了类型检测的功能。要在组件中进行类型检测,你可以赋值propTypes属性。class Greeting extends React.Component { render()转载 2017-11-16 10:17:20 · 879 阅读 · 0 评论 -
React高级指南(三)【Refs and the DOM】
在常规的React数据流中,props是父组件与子组件交互的唯一方式。为了修改子元素,你需要用新的props去重新渲染子元素。然而,在少数情况下,你需要在常规数据流外强制修改子元素。被修改的子元素可以是React组件实例,也可以是DOM元素。在这种情况下,React提供了解决办法。何时使用Refs下面有一些恰当地使用refs的场景:处理focus、文本选择或者媒体播放触发强制动画转载 2017-11-16 10:22:06 · 2006 阅读 · 0 评论 -
React高级指南(四)【Uncontrolled Components】
在大多数情况下,我们推荐使用受控组件来实现表单。在受控组件中,表单数据由React组件处理。另外一个可选项是不受控组件,其表单数据由DOM元素本身处理。不同于对每次状态处理都需要编写事件处理函数程序,在不受控组件中,你可以使用ref从DOM获得表单数据。例如,在不受控组件中,以下代码可以输入名字:class NameForm extends React.Component { co转载 2017-11-16 10:26:50 · 1924 阅读 · 0 评论 -
React高级指南(五)【Optimizing Performance】
性能优化在更新UI时,React内部使用了多种技术最小化必要的DOM操作。对于大多数应用,使用React不需要额外的特定性能优化的情况下,就可以达到一个更快的用户交互。然而,下面有几种方式能够加快你的React应用。使用生产环境如果你在React应用中遇到性能的瓶颈,请确保你是在生产环境下测试。默认地,React包含众多的帮助性的警告(warning)。这些警告在开发模式中非常转载 2017-11-16 10:28:57 · 410 阅读 · 0 评论 -
React高级指南(六)【React Without ES6】
React Without ES6通常情况下你可以用纯JavaScript类定义一个组件:class Greeting extends React.Component { render() { return h1>Hello, {this.props.name}h1>; }}如果你不使用ES6,你可以使用React.createClass来定义:var G转载 2017-11-16 10:30:27 · 455 阅读 · 0 评论 -
React高级指南(七)【React Without JSX】
React Without JSX对于React来说,并不一定需要使用JSX. 如果不想在构建环境下设置编译器,使用React而不使用JSX非常的方便。每一个JSX元素都是调用React.createElement(component, props, ...children)的语法糖,因此,使用JSX所做的任何事都可以通过纯JavaScript实现。例如,下面代码是通过JSX实现的:转载 2017-11-16 10:31:37 · 550 阅读 · 0 评论 -
React高级指南(八)【Reconciliation】
一致化处理(Reconciliation)React提供声明式API,因此在每次更新中你不需要关心具体的更改内容。这使得编写应用更加容易,但是这样使得你对React内部具体实现并不了解,这篇文章介绍了在React的”diffing”算法中我们所作出地决择,以使得组件的更新是可预测的并且可以适用于高性能应用。动机当你使用React的时候,在任何时刻,你可以认为render()函数的作用是转载 2017-11-16 10:42:54 · 1065 阅读 · 0 评论 -
React高级指南(九)【Context】
在React中,在React组件中很容易追踪数据流。当你观察组件时,你可以找出哪些属性(props)被传递,这使得你的应用非常容易理解。在某些场景下,你想在整个组件树中传递数据,但却不想手动地在每一层传递属性。你可以直接在React中使用强大的context API解决上述问题。为什么不要使用Context绝大多数的应用程序不需要使用context。如果你希望使用应用程序更加稳定就转载 2017-11-17 09:15:59 · 406 阅读 · 0 评论 -
React高级指南(十)【Web Components】
React和Web Component是为了解决不同的问题建立的。Web Component为可重用组件提供了强大的封装,然而React提供声明库,可以使得DOM和数据保持同步。两者的目标是互补的。作为开发者,你可以在你的Web Component中自由使用React,或者在React中使用Web Component,或者都使用。大多数使用React的开发者不使用Web Component,但转载 2017-11-17 09:17:12 · 2192 阅读 · 0 评论 -
React高级指南(十一)【Higher Order Components】
Higher-Order Components在React中,高阶组件是重用组件逻辑的一项高级技术。高阶组件并不是React API的一部分。高阶组件源自于React生态。具体来说,高阶组件是一个函数,能够接受一个组件并返回一个新的组件。const EnhancedComponent = higherOrderComponent(WrappedComponent);组件是将pr转载 2017-11-17 09:35:42 · 532 阅读 · 0 评论 -
React高级指南(十二)【Integrating with Other Libraries】
React与其他库的集成React可以在任何web应用中使用。React可以嵌入其他的应用中,也可以将其他的应用嵌入React中,不过需要多加小心。本篇教程将介绍部分常见的使用场景,主要包括集成jQuery和Backbone,但是同样的思想可以用来集成组件到其他任何现有的代码。与DOM操作插件的集成React 无法感知到React之外的DOM变化。这决定了更新只能基于React内部转载 2017-11-17 09:50:00 · 707 阅读 · 0 评论 -
Reactjs源码分析
前端的发展特别快,经历过jQuery一统天下的工具库时代后,现在各种框架又开始百家争鸣了。angular,ember,backbone,vue,avalon,ploymer还有reactjs,作为一个前端真是稍不留神就感觉要被淘汰了,就在去年大家还都是angularjs的粉丝,到了今年又开始各种狂追reactjs了。前端都是喜新厌旧的,不知道最后这些框架由谁来一统天下,用句很俗的话说,这是最好的时代转载 2018-03-28 09:53:13 · 1244 阅读 · 0 评论 -
Reactjs入门官方文档(十一)【Thinking in React】
此文章是翻译thingking in react这篇React(版本v15.5.4)官方文档。React 的编程思想在我们看来,React 是 JavaScript 构建大型,高性能 Web 应用的首选。在 Facebook 和 Instagram 中都能很好的应用。React 中许多重要部分之一是思考如何构建应用程序。 在本文档中,我们将引导你完成用 React 构建一个可搜索的产品数据表的思考翻译 2017-11-15 15:44:51 · 624 阅读 · 0 评论 -
Reactjs入门官方文档(十)【composition-vs-inheritance】
此文章是翻译composition vs inheritance这篇React(版本v15.5.4)官方文档。组合和继承React 有一个非常强大的组合模式(composition model),在组件之间,我们建议使用组合(composition)而不是继承(inheritance)。在这个部分,我们将会考虑几个对React 开发新手来说经常遇到的几个继承问题,展示我们如何使用组合方式来解决它们翻译 2017-11-15 11:52:06 · 566 阅读 · 0 评论 -
MVC4中使用React.js入门
HomeController.csusing System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace ReactJSExamples.Controllers{ public class HomeController : Cont原创 2017-08-03 23:08:36 · 1580 阅读 · 0 评论 -
MVC5中使用ReactJS.NET入门
CommentModel.csusing System;using System.Collections.Generic;using System.Linq;using System.Web;namespace ReactJS.Models{ public class CommentModel { public string Author { get; set原创 2017-08-23 22:35:12 · 5049 阅读 · 0 评论 -
React 组件生命周期
在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态:Mounting:已插入真实 DOMUpdating:正在被重新渲染Unmounting:已移出真实 DOM生命周期的方法有:componentWillMount 在渲染前调用,在客户端也在服务端。componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过t转载 2017-08-27 22:29:46 · 506 阅读 · 0 评论 -
React Native之生命周期
React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分)。如图: 下面简单讲解一下三大阶段中各自的函数:实例化阶段:在日常开发中,最为常用的就是实例化阶段,因为该阶段是组件的构建,展示阶段。getDefaultProps:该函数用于初始化一些默认的属性,开发中,通常将一些固定不变的值放在该函数内进行初始化,比如url。可以利用转载 2017-08-27 20:57:22 · 548 阅读 · 0 评论 -
Reactjs入门官方文档(一)【jsx】
jsx简介 译自reactjs官方文档看下面一段变量声明: const element = <h1>Hello, world!</h1>; 它既不是string,也不是html对象, 我们称之为jsx, 是javascript的一种扩展. 建议使用react时使用jsx描述展示层. jsx生成react对象, 我们将在下一部分学习将他们渲染到DOM. 下面是jsx的基本用法jsx中嵌入表翻译 2017-11-14 15:27:14 · 1375 阅读 · 0 评论 -
Reactjs入门官方文档(二)【rendering-elements】
Rendering Elements 译自reactjs官方文档Elements是React应用的最小构建块. 一个element是对你希望在屏幕上看到的东西的一个描述:const element = <h1>Hello, world</h1>;与DOM元素相比, react elements是普通的js对象, 而且创建代价低. React DOM将会处理DOM的更新以匹配react ele翻译 2017-11-14 15:29:02 · 485 阅读 · 0 评论 -
Reactjs入门官方文档(三)【components-and-props】
Components and Props 译自reactjs官方文档Components帮助把UI分割成独立的,可重用的片段, 而我们只需要孤立的考虑每个片段. 在概念上, components就像javascript的函数, 它们接受任意的输入(称为props), 然后返回描述UI的React ElementsComponents的函数式表达和类表达定义一个component最简单的办法是翻译 2017-11-14 15:30:50 · 401 阅读 · 0 评论 -
Reactjs入门官方文档(四)【state-and-lifecycle】
状态和生命周期 译自reactjs官方文档考虑之间举的时钟的例子, 目前为止,我们只学了这一种方法来更新UI,即重新调用ReactDOM.render()对象:function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeStri翻译 2017-11-15 09:54:02 · 422 阅读 · 0 评论 -
Reactjs入门官方文档(五)【handling-events】
事件处理 译自reactjs官方文档React elements中的事件处理与DOM元素中的时间处理十分相似, 只有些语法上的区别: * React事件使用驼峰命名,而不是小写. * 使用JSX时事件处理传递一个函数而不是HTML中的字符串 例如, html中:button onclick="activateLasers()"> Activate Lasersb翻译 2017-11-15 09:58:45 · 482 阅读 · 0 评论 -
Reactjs入门官方文档(六)【conditional-rendering】
选择性渲染 译自reactjs官方文档 可以根据需要预先创建封装了不同逻辑的对象, 然后根据条件渲染其中的一个或多个. 根据条件渲染(conditional rendering)和javascript中的条件判断是一样的. 例如根据用户是否登录返回不同的greeting:function Greeting(props) { const isLoggedIn = p翻译 2017-11-15 10:01:42 · 441 阅读 · 0 评论 -
Reactjs入门官方文档(七)【lists-and-keys】
译自reactjs官方文档 我们首先看下在Javascript中如何对一个list进行修改. 下面的例子中我们使用map()方法将一个list中的每个值加倍, 并在最后打印结果:const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled);将翻译 2017-11-15 10:15:49 · 485 阅读 · 0 评论 -
Reactjs入门官方文档(八)【forms】
表单 译自reactjs官方文档 HTML表单通常保存了一些内部状态, 所以它们的工作方式在React中和其他DOM对象有点不同.翻译 2017-11-15 11:13:59 · 601 阅读 · 0 评论 -
Reactjs入门官方文档(九)【lifting-state-up】
此文章是翻译lifting-state-up这篇React(版本v15.5.4)官方文档。状态提升(Lifting State Up)通常,几个组件需要响应相同的数据变化。我们建议提升共享状态(lifting the shared state up)到距离它们最近的父组件。让我们看看这是如何运转的。在这部分,我们将要创建一个温度计算器来计算给定的温度是否使水沸腾。我们将创建一个BoilingVer翻译 2017-11-15 11:40:14 · 569 阅读 · 0 评论 -
React源码解析
前言适合有一定 React 项目经验阅读,默认对 React 的常用 api 较为熟悉研究 React 源码是结合网上的一些分析文章+自己看代码理解最开始看是因为项目中遇到性能问题,网上没有相关资料,所以想找到具体影响的点以下的代码解析以 15.4.1 版本为基础,且去除了开发环境的warning,为了区分,保留的注释都为英文,新增的注释为中文,尽量保持原注释文中有部分自己的演绎、理解、猜转载 2018-03-28 21:51:13 · 645 阅读 · 0 评论