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. 实例学习Backbone.js(一)

    前面有两篇文章介绍了Backbone的model.collection和view,那么接下来我想用一个完整的Demo来记录我学习的过程, 单页操作,实现数据的增删改,后台使用json做数据库,通过re ...

  2. UNIX环境高级编程笔记之线程

    本章涉及到线程的一些基本知识点,讨论了现有的创建线程和销毁线程的POSIX.1原语,此外,重点介绍了线程同步问题,讨论了三种基本的同步机制:互斥量.读写锁.条件变量.

  3. 对android应用一些破解的方法

    因为需要破解一款应用,找了些资料 Android手机中的程序文件夹拷贝到别的Android手机上还能用么? xx.apk Android个人破解应用新思路 安卓手机下xx.apk JAVA破解之旅 s ...

  4. ps图像渐变

    整理自:http://zhidao.baidu.com/question/16374167.html 1.用ps打开图片 2.在切换至英文输入法状态下(下面的操作均如此)按q 快捷键q的作用是切换标准 ...

  5. 【软件分析与挖掘】A Comparative Study of Supervised Learning Algorithms for Re-opened Bug Prediction

    摘要: 本文主要是评估多种监督机器学习算法的有效性,这些算法用于判断一个错误报告是否是reopened的,算法如下: 7种监督学习算法:kNN,SVM, SimpleLogistic,Bayesian ...

  6. php和egret的配合

    egret对资源路径和js的应用都是相对路径,而在现在许多流行的框架里,一般都把js和资源放到专门的文件夹下,如public. 修改步骤: 1.修改index.html,改为全路径,如: <sc ...

  7. Popup 显示阴影

    WPF Popup: How to put a border around the popup? 通过设置 Border 的 margin 来为阴影留出位置,并设置 Popup: AllowsTran ...

  8. android自定义之 5.0 风格progressBar

    最近做项目,用到了ProgressBar ,就想到了要使用Android5.0 的效果,就随手实现了一下. 效果图: 大概的思路: 1. 圆圈通过Canvas去绘制 2.圆圈的动画通过Animator ...

  9. webpack多页面开发与懒加载hash解决方案

    之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景,如果是常规单页面应用的话,上篇文章提供的方案是没有问题的.但是前端项目复杂多变,应对复杂多页面项目时,我们不得不继续踩w ...

  10. Hadoop第6周练习—在Eclipse中安装Hadoop插件及测试(Linux操作系统)

    1    运行环境说明 1.1     硬软件环境 1.2     机器网络环境 2    :安装Eclipse并测试 2.1     内容 2.2     实现过程 2.2.1   2.2.2   ...