React 精华一页纸

同 angularJS、Vue一样,React 也是一种替换框架,采用JSX语法进行替换

react.min.js - React 的核心库

react-dom.min.js - 提供与 DOM 相关的功能

browser.min.js - 用于将 JSX 语法转为 JavaScript 语法

1、典型用法

入门例子

ReactDOM.render(

Hello, world!

,

document.getElementById('example')

);

过程:

I、使用框架 ReactDOM.render 方法操作dom

II、第一个参数时是 插入的 JSX 语法生成的元素 ;第二个参数是绑定 到的DOM的节点

如果要解析 JSX,则type 要设定为

JSX:类似 HTML + JS的语法,编译后进行了优化,效率更高

2、基础概念

I、表达式

ReactDOM.render(

{i == 1 ? 'True!' : 'False'}

,

document.getElementById('example')

);

和 angular和vue不同的是,没有采用双括号{{}}, 而使用单括号 {} 取值和表达式运算

II、逻辑控制

因为是类HTML的语法,所以没有设计 一些 指令,都是 API操作;事件,也是使用的js 的原生事件,没有封装

React 的 JSX 使用大、小写的约定来区分本地组件的类(自定义组件)和 HTML 标签

3、绑定

同angularJS和Vue不一样,React 没有绑定指令,所以他的绑定,是直接引用和操纵对象的状态(这个对象是 state,具体参照下面关于state的描述)

4、组件化

I、组件化的例子

var WebSite = React.createClass({

render: function() {

return (

);

}

});

var Name = React.createClass({

render: function() {

return (

{this.props.name}

);

}

});

var Link = React.createClass({

render: function() {

return (

{this.props.site}

);

}

});

React.render(

,

document.getElementById('example')

);

II、组件化的步骤

一、注册组件

通过 React.createClass 创建类,创建一个 自定义标签替换规则

固定属性 render 返回一个 HTML 模板

二、父控件(外层)向自定义组件(内层)传递数据

I、通过 this.props 传递数据

通过 getDefaultProps 获取默认数据

propTypes 属性可以校验传递的数据

II、操纵状态属性 state

React 把组件看成状态机,每个自定义组件,都会添加一个 state 对象

通过 this.state 可以获取state对象

通过 getInitialState 函数获取初始的 state对象 存储的数据

通过 this.setState 本对象的方法来设置 state对象 存储的数据

var LikeButton = React.createClass({

getInitialState: function() {

return {liked: false};

},

handleClick: function(event) {

this.setState({liked: !this.state.liked});

},

render: function() {

var text = this.state.liked ? '喜欢' : '不喜欢';

return (

{text}我。点我切换状态。

);

}

});

React.render(

,

document.getElementById('example')

);

state VS props

props 传递数据给子组件,不可变;state 因为可变,可以和用户交互

同angularJS和Vue相比,

5、组件 API 与生命周期

设置状态:setState

替换状态:replaceState

设置属性:setProps

替换属性:replaceProps

强制更新:forceUpdate

获取DOM节点:findDOMNode

判断组件挂载状态:isMounted

Mounting - 已经插入DOM

Updating - 正在重新渲染

Unmounint - 移除DOM

生命周期的方法 - 回调函数

componentWillMount

componentDidMount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

componentWillUnmount

6、ref 属性

这个和 vue的 el属性类似,可以获取整个元素,这样可以方便的操作元素

var MyComponent = React.createClass({

handleClick: function() {

// 使用原生的 DOM API 获取焦点

this.refs.myInput.focus();

},

render: function() {

// 当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs

return (

type="button"

value="点我输入框获取焦点"

onClick={this.handleClick}

/>

);

}

});

ReactDOM.render(

,

document.getElementById('example')

);

I、在需要操作的元素上,绑定 ref 属性

II、通过 react 组件对象的 this.refs 获取绑定的这个属性

后续可以对获取的元素,进行操作

7、综合应用

I、通过 state 属性,实现双向数据绑定 - 针对表单

var HelloMessage = React.createClass({

getInitialState: function() {

return {value: 'Hello Runoob!'};

},

handleChange: function(event) {

this.setState({value: event.target.value});

},

render: function() {

var value = this.state.value;

return

{value}

;

}

});

ReactDOM.render(

,

document.getElementById('example')

);

a、通过原生事件 onchange 监听,指定监听函数 handleChange

b、在监听事件 中 调用 this.setState 更新绑定数据 (通过event可以获取各种数据)

II、通过 state 和 props 属性,实现 内层触发外层更新数据

var Content = React.createClass({

render: function() {

return

点我

{this.props.myDataProp}

}

});

var HelloMessage = React.createClass({

getInitialState: function() {

return {value: 'Hello Runoob!'};

},

handleChange: function(event) {

this.setState({value: '菜鸟教程'})

},

render: function() {

var value = this.state.value;

return

updateStateProp = {this.handleChange}>

;

}

});

ReactDOM.render(

,

document.getElementById('example')

);

a、通过原生事件 onClick 监听,指定监听函数 为外层传递来的 属性 this.props.updateStateProp

b、外层传递到内层的 属性 updateStateProp 指定为自身的监听事件 this.handleChange

c、外层监听事件 中 调用 this.setState 更新绑定数据 (通过event可以获取各种数据)

外层传递到内层的 属性 updateStateProp

III、结合 ajax 请求,更新UI

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 this.setState 方法重新渲染 UI。

var UserGist = React.createClass({

getInitialState: function() {

return {

username: '',

lastGistUrl: ''

};

},

componentDidMount: function() {

this.serverRequest = $.get(this.props.source, function (result) {

var lastGist = result[0];

this.setState({

username: lastGist.owner.login,

lastGistUrl: lastGist.html_url

});

}.bind(this));

},

// 这里的 bind(this) 是因为 function 里面使用了 this.setState,此时的this 指针并没有指向外层的class对象,.bind()创建了一个新函数(原先函数的拷贝),当这个函数在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)

componentWillUnmount: function() {

this.serverRequest.abort();

},

render: function() {

return (

{this.state.username} 用户最新的 Gist 共享地址:

{this.state.lastGistUrl}

);

}

});

ReactDOM.render(

{/* */}

,

mountNode

);

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,404评论 1 18
  • 现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一...
    sakura_L阅读 230评论 0 0
  • React 元素 ReactNode ReactNode 是虚拟 DOM 的基本构建,可以是以下任意一种核心类型 ...
    不二很纯洁阅读 7,499评论 3 77
  • 目前,react组件有三种写法,分别是es5的createClass写法,es6的class写法,以及statel...
    ZoomFunc阅读 1,246评论 0 1
  • JSX 知识准备 JSX 并不是一门全新的语言,仅仅是一个语法糖,允许开发者在javascript中编写XML语言...
    艾伦先生阅读 3,953评论 4 20
  • “妈妈,我要妈妈!”秦云赶快过去,想抱住儿子。“妈妈在这,别怕!”“你不是我妈妈!我要妈妈!”子杰一边推开她一边大...
    就要马甲线阅读 138评论 0 1
  • 红薯窖分两种,一种是圆形的,口小底大,像一眼深井。挖这种窖需要技术,但使用期限长,如果保护得当,夏天不进雨水,不垮...
    文暖书香阅读 761评论 0 3
  • KVC( Key - Value - Coding ),键值编码,是一种间接访问实例变量的方法 Key : 键,...
    心情的颜色阅读 112评论 0 2
  • 最近马佳佳在一次演讲中提到如何与陌生人打交道的心法,我觉得特别的有意思。 怎么样能够引起陌生人,特别是那些地位很高...
    张翔读一本书写一本书阅读 86评论 0 0