React入门--------组件API
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的更多相关文章
- React入门--------组件的生命周期
		Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ... 
- React入门--------顶层API
		React.createClass 参数:config(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由 ... 
- React入门---组件嵌套-5
		组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ... 
- React入门---组件-4
		组件:网页可以分为多个模块,比如头部,底部,分享等各种模块,这些模块在其他页面也可能会用到,我们把这些分开,每一个模块当作一个组件,进行复用. 接下来直接以头部 header作为一个组件来进行demo ... 
- react入门-组件方法、数据和生命周期
		react组件也像vue一样,有data和methods,但是写法就很不同了: <!DOCTYPE html> <html lang="en"> <h ... 
- react入门----组件的基础用法
		1.组件 <!-- React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 ... 
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
		第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ... 
- 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化
		课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ... 
- reactjs入门到实战(六)---- ReactJS组件API详解
		全局的api 1.React.createClass 创建一个组件类,并作出定义.组件实现了 render() 方法,该方法返回一个子级.该子级可能包含很深的子级结构.组件与标准原型类的不同之处在于, ... 
随机推荐
- 实例学习Backbone.js(一)
			前面有两篇文章介绍了Backbone的model.collection和view,那么接下来我想用一个完整的Demo来记录我学习的过程, 单页操作,实现数据的增删改,后台使用json做数据库,通过re ... 
- UNIX环境高级编程笔记之线程
			本章涉及到线程的一些基本知识点,讨论了现有的创建线程和销毁线程的POSIX.1原语,此外,重点介绍了线程同步问题,讨论了三种基本的同步机制:互斥量.读写锁.条件变量. 
- 对android应用一些破解的方法
			因为需要破解一款应用,找了些资料 Android手机中的程序文件夹拷贝到别的Android手机上还能用么? xx.apk Android个人破解应用新思路 安卓手机下xx.apk JAVA破解之旅 s ... 
- ps图像渐变
			整理自:http://zhidao.baidu.com/question/16374167.html 1.用ps打开图片 2.在切换至英文输入法状态下(下面的操作均如此)按q 快捷键q的作用是切换标准 ... 
- 【软件分析与挖掘】A Comparative Study of Supervised Learning Algorithms for Re-opened Bug Prediction
			摘要: 本文主要是评估多种监督机器学习算法的有效性,这些算法用于判断一个错误报告是否是reopened的,算法如下: 7种监督学习算法:kNN,SVM, SimpleLogistic,Bayesian ... 
- php和egret的配合
			egret对资源路径和js的应用都是相对路径,而在现在许多流行的框架里,一般都把js和资源放到专门的文件夹下,如public. 修改步骤: 1.修改index.html,改为全路径,如: <sc ... 
- Popup 显示阴影
			WPF Popup: How to put a border around the popup? 通过设置 Border 的 margin 来为阴影留出位置,并设置 Popup: AllowsTran ... 
- android自定义之 5.0 风格progressBar
			最近做项目,用到了ProgressBar ,就想到了要使用Android5.0 的效果,就随手实现了一下. 效果图: 大概的思路: 1. 圆圈通过Canvas去绘制 2.圆圈的动画通过Animator ... 
- webpack多页面开发与懒加载hash解决方案
			之前讨论了webpack的hash与chunkhash的区别以及各自的应用场景,如果是常规单页面应用的话,上篇文章提供的方案是没有问题的.但是前端项目复杂多变,应对复杂多页面项目时,我们不得不继续踩w ... 
- Hadoop第6周练习—在Eclipse中安装Hadoop插件及测试(Linux操作系统)
			1 运行环境说明 1.1 硬软件环境 1.2 机器网络环境 2 :安装Eclipse并测试 2.1 内容 2.2 实现过程 2.2.1 2.2.2 ... 
