React入门和组件
DreamFive
这个作者很懒,什么都没留下…
展开
-
第07节、React组件小实例
生命周期实例这个案例是自定义一个组件,并把组件进行不断闪烁,形成一种动画形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt转载 2018-03-07 11:43:50 · 155 阅读 · 0 评论 -
第05节、React组件:props和render成员
props是组件固有属性的集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的。属性的初识值通常由React.createElement函数或者JSX中标签的属性值进行传递,并合并到组件实例对象的this.props中。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...转载 2018-03-06 17:47:07 · 182 阅读 · 0 评论 -
第04节、React组件:state成员
前边的代码中我们初步认识了组件,接下来具体学习React组件的作用,React组件可以看成是带有props属性集合和state状态集合并且构造出一个虚拟DOM结构的对象。state成员组件总是需要和用户互动的。React的一大创新,就是将界面组件看成一个状态机,用户界面拥有不同状态并根据状态进行渲染输出,用户界面和数据始终保持一致。开发者的主要工作就是定义state,并根据不同的state渲染对应...转载 2018-03-06 17:18:24 · 172 阅读 · 0 评论 -
第03节、进阶JSX语法
JSX上的数组输出使用JSX输出数组是有一些小坑需要迈过的,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia转载 2018-03-06 16:59:33 · 168 阅读 · 0 评论 -
第02节、初识JSX语法
JSX即JavaScript XML,它使用XML标记来创建虚拟DOM和声明组件。加入JSX语法支持如果要使用JSX语法支持,你可以使用Babel进行转换,这里使用Babel的核心文件browser.js。你可以去网上提供的静态资源库引用(http://www.bootcdn.cn/),也可以自己下载。但是在实际项目开发过程中,我们在代码中不是直接引入该js文件的,而是使用它把代码转换成静态文件之...转载 2018-03-06 16:36:37 · 176 阅读 · 0 评论 -
第01节、React环境搭建和Hello World程序
搭建开发环境下载所需文件react.js:实现React核心逻辑,且于具体的渲染引擎无关,从而可以跨平台公用。如果应用要迁移到React Native,这一部分逻辑是不需要改变的。react-dom.js:包含了具体的DOM渲染更新逻辑,以及服务端渲染的逻辑,这部分就是与浏览器相关的部分了。Hello World程序<!DOCTYPE html><html lang="en"&...转载 2018-03-05 16:20:03 · 171 阅读 · 0 评论 -
前言、React介绍
前置知识:HTML+CSSJavaScriptreact简介:React起源于Facebook的内部项目ReactJS官方地址:https://facebook.github.io/react/GitHub地址:https://github.com/facebook/reactreact特点:虚拟DOM:React也是以数据驱动,每次数据变化React都会扫码整个虚拟DOM树,自动计算与上次虚拟D...转载 2018-03-05 15:46:31 · 177 阅读 · 0 评论 -
React表单应用--不可控组件
在input标签中不把value绑定到state上的就是不可控组件,它的数据不合state对应,所以在开发时会给自己挖很多坑,但是不可控组件并不是不可掌控。先来做一个最简单的不可用组件。render:function () { return ( <div> <input type="text"/> </div> ...转载 2018-03-09 15:06:55 · 237 阅读 · 0 评论 -
React表单应用--可控组件
可控组件和不可控组件:在React中的input标签是有些小坑的,input本身就有自己的缓存机制,然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件,反之则是不可控组件。可控组件:在render()函数中设置了value的<input>是一个功能受限的组件,渲染出来的HTML元素始终...转载 2018-03-09 14:58:41 · 349 阅读 · 0 评论 -
React表单应用--表单name复用
name复用方式直接读取表单的属性值,比bind写法少一个参数(React中事件响应函数会自动绑定this)。其原理是在所有的标签中设置统一的name属性,并将这个属性值对应为state属性,在事件响应函数中通过读取表单的name值获得state属性,从event.target.value获取用户输入的值(check控件稍有不同),要求所有相关的标签(包括input标签)都要统一设置name属性。...转载 2018-03-08 11:28:50 · 1224 阅读 · 0 评论 -
React表单应用--事件响应和bind复用
事件响应表单组件可以通过设置onChange()回调函数来监听组件变化。当用户的交互行为导致变化时,onChange()被执行并通过浏览器做出响应。用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取。<input>或<textarea>的value发生变化。<input>的checked状态改变。<option>的se...转载 2018-03-08 11:17:32 · 425 阅读 · 0 评论 -
第10节、获取真实的DOM节点
组件并不是真实的 DOM 节点,而是存在于内存中的一种数据结构,叫做虚拟 DOM 。只有当他插入文档以后,才会变成真实的 DOM。根据React设计,所有的 DOM 变动,都现在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实的 DOM 上,这种算法叫做 DOM diff ,他可以极大提高网页的性能表现。但是,有时候需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。&...转载 2018-03-07 15:56:37 · 354 阅读 · 0 评论 -
第09节、React组件:props属性验证--PropTypes
组件的属性可以接受任意值,字符串、对象、数组、函数等等。有时候我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。比如希望name属性不能缺少、onClick属性必须是函数类型等,这对确保组件被正确使用非常有意义。为此React引入了propTypes机制。React.PropTypes提供各种验证器(validator)来验证传入数据的有效性。当向props传入无效数据时,React会...转载 2018-03-07 15:40:57 · 563 阅读 · 0 评论 -
第08节、React组件:this.props.children
this.props对象的属性与组件的属性一一对应,但有一个例外,就是this.props.children属性。他表示组件的所有子节点。子节点组件经常会写入很多子属性,这种子属性的需求,就要用到this.props.children属性。<!DOCTYPE html><html lang="en"><head> <meta charset="...转载 2018-03-07 15:14:33 · 686 阅读 · 0 评论 -
第06节、React组件:生命周期
一个组件完整的生命周期包含实例化阶段、活动阶段、销毁阶段三个阶段。每个阶段又由相应的方法管理。过程中涉及三个主要的动作术语:mounting:表示正在挂接虚拟DOM到真实DOM。updating:表示正在被重新渲染。unmounting:表示正在将虚拟DOM移除真实DOM。每个动作术语提供两个函数:componentWillMounte()componentDidMount()componentW...转载 2018-03-06 18:21:48 · 122 阅读 · 0 评论