setState

参数:nextState(object),[callback(function)]

设置nextState的某个键值。通常如果希望在某个事件或某个回调中来重新渲染组件,setState是一个最常用的触发方法,因为我们把UI内容跟state状态直接绑定在一起,一旦state发生改变并触动了绑定的逻辑,那么ui内容自然也会跟着变动:

 var Component1 = React.createClass({
getInitialState: function() {
return {
isClick: !
}
},
componentDidUpdate: function(){
console.log('componentDidUpdate')
},
clickCb: function() {
this.setState({
isClick : !
}, function(){
console.log(this.state.isClick)
})
},
render: function() {
return (<div onClick={this.clickCb}>
isClick:{this.state.isClick ? 'yes' : 'nope'}
</div>)
}
});
var div = document.getElementById('a');
ReactDOM.render(
<Component1 />, div
);

如上通过state.isClick来决定div内要显示的内容,而我们点击div时会改变state.isClick的状态,从而触发绑定条件更改了div中的内容。

运行结果如下:

注意:该方法的回调是在重新渲染之后执行的。

replaceState

参数:nextState(object),[callback(function)]

整体更换掉state,回调方法在重新渲染之后执行。

forceUpdate

参数:[callback(function)]

在任何调用的时候强制渲染组件,即使使用shouldComponentUpdata返回了false

注意:该方法的回调也是在重新渲染之后执行的。

getDOMNode

返回组件/ReactElment挂载到页面上所对应的DOM元素

 var Component1 = React.createClass({
getInitialState: function() {
return {
isClick: !
}
},
clickCb: function() {
this.setState({
isClick : !
}, function(){
console.log(this.state.isClick)
})
},
render: function() {
return (<div onClick={this.clickCb}>
isClick:{this.state.isClick ? 'yes' : 'nope'}
</div>)
}
});
var div = document.getElementById('a');
var c = ReactDOM.render(
<Component1 />, div
);
console.log(c.getDOMNode())

isMounted

返回一个布尔值,如果组件挂载到了dom中,isMounted()返回true

var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
}, componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
}, render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
}); ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);

setProps

参数:nextProps(object),[callback(function)]

和setState类似,不过修改的是props。

replaceProps

参数:nextProps(object),[callback(function)]

和replaceState类似,不过修改的是props。

refs

这个方法不属于组件,但也是在组件中常用的一个小技巧

在前面中提到,可以使用ReactClass.getDOMNode()的方法来获取到组件渲染在页面上的DOM节点,但是如果希望获取到的,是组件中的某个DOM元素呢

 var Component1 = React.createClass({
clickCb: function(e) {
if(e.target === this.refs.li2.getDOMNode()){
alert('你点到第二个LI了')
}
},
render: function() {
return (<ul onClick={this.clickCb}>
<li></li>
<li ref="li2"></li>
<li></li>
</ul>)
}
});
var div = document.getElementById('a');
ReactDOM.render(
<Component1 />, div
);

组件中的第二个li绑定了一个ref属性,值为li2,这意味着可以在组件中以this.refs.li2的形式来获取到改ReactElement。然后绑定点击事件,在点击的时候判断被点击的li元素是否等于this.refs.lis.getDOMNode9()。

下面再看一个例子:

 var App = React.createClass({
getInitialState: function() {
return {userInput: ''};
},
handleChange: function(e) {
this.setState({userInput: e.target.value});
},
clearAndFocusInput: function() {
// Clear the input
this.setState({userInput: ''}, function() {
// 组件重绘后会立即执行这句代码:
this.refs.theInput.getDOMNode().focus(); // input成功聚焦(focus)
});
},
render: function() {
return (
<div>
<div onClick={this.clearAndFocusInput}>
Click to Focus and Reset
</div>
<input
ref="theInput" //我们可以在组件里以 this.refs.theInput 获取到它
value={this.state.userInput}
onChange={this.handleChange}
/>
</div>
);
}
});

React入门--------组件API的更多相关文章

  1. React入门--------组件的生命周期

    Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ...

  2. React入门--------顶层API

    React.createClass 参数:config(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由 ...

  3. React入门---组件嵌套-5

    组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ...

  4. React入门---组件-4

    组件:网页可以分为多个模块,比如头部,底部,分享等各种模块,这些模块在其他页面也可能会用到,我们把这些分开,每一个模块当作一个组件,进行复用. 接下来直接以头部 header作为一个组件来进行demo ...

  5. react入门-组件方法、数据和生命周期

    react组件也像vue一样,有data和methods,但是写法就很不同了: <!DOCTYPE html> <html lang="en"> <h ...

  6. react入门----组件的基础用法

    1.组件 <!-- React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 ...

  7. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  8. 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  9. reactjs入门到实战(六)---- ReactJS组件API详解

    全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于, ...

随机推荐

  1. Unitils集成DBUnit的问题-解决方案

    Unitils在集成DBunit时,如果数据库是mysql时,就会出现一些如下: org.unitils.core.UnitilsException: Error inserting test dat ...

  2. SQL Server 问题 1 - SQL Server encountered error 0x80070422/0x8007042d

    今天执行SQL Server 2014的full-text search 查询操作:select * from table where contains(summary, 'smith') 报出如下错 ...

  3. CENTOS 基础指令——查看系统环境

    1.查看内核版本 # cat /proc/version # uname -a # uname -r 2.查看linux版本 # cat /etc/issue # cat /etc/redhat-re ...

  4. 十八、【开源】EnterpriseFrameWork框架核心类库之Winform控制器

    回<[开源]EnterpriseFrameWork框架系列文章索引> EFW框架源代码下载:http://pan.baidu.com/s/1qWJjo3U EFW框架中的WinContro ...

  5. mysql安装过程中出现错误ERROR 1820 (HY000): You must SET PASSWORD before executing this statement解决

    mysql安装过程中出现错误ERROR 1820 (HY000): You must SET PASSWORD before executing this statement解决   最近新装好的my ...

  6. 天猫浏览型应用的CDN静态化架构演变

    原文链接:http://www.csdn.net/article/2014-01-22/2818227-CDN-Architecture 在天猫双11活动中,商品详情.店铺等浏览型系统,通常会承受超出 ...

  7. JAVA & JSON详解

    JSON定义 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类 ...

  8. JS基础回顾,小练习(去除字符串空格)

    方法1: var str = ' h t m l 5 '; function trim(str) { var reg = /(\s+)/g; var m,s = str; while(m = reg. ...

  9. Hadoop第13周练习—HBase作业

    1    :举例子说明HBase相对简单 1.1 1.2     回答 2    :设计HBase存储站内短信 2.1 2.2     回答 书面作业1:举例子说明HBase相对简单 请举出一例子,使 ...

  10. selenium webdriver (python) 第一版PDF

    前言 如果你是一位有python语言基础的同学,又想通过python+ selenium去实施自动化,那么你非常幸运的找到了这份文档,我也非常荣幸能为你的自动化学习之路带来一丝帮助. 其实,我在sel ...