React js
yubo_725
大前端攻城狮
展开
-
1、初识Reactjs——HelloWorld程序
一、Reactjs简介React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。简单仅仅只要表达出你的应用程序在任一个时间点应该长的样子,原创 2016-01-17 14:32:20 · 4357 阅读 · 0 评论 -
2、Reactjs中的属性(this.props)
一、什么是属性React官方文档上对于属性的介绍如下:React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。React中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,我们可以通过this.props获取属性对象二、属性的使用方法原创 2016-01-17 14:56:17 · 29392 阅读 · 0 评论 -
3、React中的状态(this.state)
一、什么是statestate表示react组件内部的一种状态,通过组件内的getInitialState函数,可以为组件的初始状态赋值,当组件的状态发生改变时,组件会重新渲染。官方对state的说明如下:组件其实是状态机(State Machines)React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态,可以轻松让用户界面和数据保持一致。原创 2016-01-17 15:56:59 · 16351 阅读 · 1 评论 -
4、React对组件的DOM事件监听
下面的代码展示了在React中如何对按钮的点击事件和输入框的输入事件做监听: State var HelloWorld = React.createClass({ handleClick: function() { alert('you click me!'); }, handleChange: function(event){原创 2016-01-17 16:42:12 · 12430 阅读 · 2 评论 -
5、Reactjs中组件之间的通信
React中最重要的就是组件了,组件之间可以嵌套使用,那么,父组件和子组件之间,如何进行通信呢?下面用一个例子记录React中组件之间的通信,因为组件中包含有属性和状态两个对象,所以组件间的通信,主要通过这两个对象来完成。父组件给子组件通信,可以直接使用props,让父组件传递给子组件一个属性,子组件拿到这个属性即可;子组件给父组件通信,也需要用到props,不过这个就有点类似于回调函原创 2016-01-18 15:37:55 · 3840 阅读 · 1 评论 -
6、React中的表单
React中的表单和html中的表单没有什么大区别,无非是定义表单组件时,获取表单中的输入框,复选框,下拉框等一些控件的值,下面用一个Demo记录React中使用表单的方法,浏览器中运行的效果如下图:点击“提交”按钮后,控制台中会打印出表单中的数据,下面上代码: Mixin用法 .redStar { color: red; } .loginHin原创 2016-01-19 18:22:21 · 3676 阅读 · 0 评论 -
7、React中的refs的使用
ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示: var App = React.createClass({ render: function() { return ( ); } }); React.render原创 2016-01-21 11:51:27 · 31664 阅读 · 3 评论 -
8、React中classSet的用法
本篇记录如何使用React中的classSet,为一个DOM节点指定多个不同的class。如果我们要为一个DOM节点设置多个不同的class,一般是下面这种写法:在React中,如果不使用classSet,要为一个DOM节点指定多个不同的class,可能是下面这种写法:var App = React.createClass({ render: function() { var c原创 2016-01-21 22:34:46 · 7216 阅读 · 2 评论 -
ReactJS实战之简易弹球游戏的实现
这一篇记录的是使用ReactJS完成一个简易的弹球游戏,游戏在浏览器中运行的效果图如下所示:鼠标在游戏面板中左右移动控制挡板的水平移动。下面一步一步实现这个简单的游戏。首先,我们需要知道如何在浏览器中绘图,这里的小球和挡板,都是通过绘图画出来的,浏览器中的绘图主要使用了html5的canvas标签,定义一个canvas标签并指定大小,然后获取canvas的context,通过con原创 2016-08-04 16:27:22 · 5904 阅读 · 1 评论