摘自阮一峰:React入门实例教程,转载请注明出处。

一、获取真实的DOM节点

  组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

  但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性。

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.focus();
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
      </div>
    );
  }
}); ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

  上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

  需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

  React 组件支持很多事件,除了 Click 事件以外,还有 KeyDown 、Copy、Scroll 等,完整的事件清单请查看官方文档。

二、this.state 组件状态

  组件免不了要与用户互动,React的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。

var LikeButton = React.createClass({
  getInitialState: function() { //定义初始状态,也就是一个对象
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked}); //通过this.state属性读取定义的状态
                          //每次修改以后,自动调用 this.render 方法,再次渲染组件
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
      You {text} this. Click to toggle.
      </p>
    );
  }
}); ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

  上面代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

  由于 this.props 和 this.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

三、表单

  用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取。

var Input = React.createClass({
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function () {
    var value = this.state.value;
    return (
      <div>
        <input type="text" value={value} onChange={this.handleChange} />
        <p>{value}</p>
      </div>
    );
  }
}); ReactDOM.render(<Input/>, document.body);

  上面代码中,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况.

四、组件的生命周期

  组件的生命周期分成三个状态:

Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM

  React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

  此外,React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

  下面是一个例子。

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },   componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },   render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
}); ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

  上面代码在hello组件加载以后,通过 componentDidMount方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

  另外,组件的style属性的设置方式也值得注意,不能写成

style="opacity:{this.state.opacity};"

  而要写成

style={{opacity: this.state.opacity}}

  这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。

五、Ajax

  组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI.

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },   componentDidMount: function() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      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
);

  上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。

React 入门学习笔记2的更多相关文章

  1. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  2. React 入门学习笔记1

    摘自阮一峰:React入门实例教程,转载请注明出处. 一. 使用React的html模板 使用React, 我们需要加载3个库,react.js, react-dom.js, 和browser.js. ...

  3. React 入门学习笔记整理(一)——搭建环境

    使用create-react-app脚手架搭建环境 1.安装node .软件下载地址:https://nodejs.org/en/,我下的推荐的版本. 安装之后测试是否安装成功.windows系统下, ...

  4. React 入门学习笔记整理(二)—— JSX简介与语法

    先看下这段代码: import React from 'react'; //最终渲染需要调用ReactDOM库,将jsx渲染都页面中 import ReactDOM from 'react-dom'; ...

  5. React 入门学习笔记整理(三)—— 组件

    1.定义组件 1)函数组件 function GreateH(props){ return <div> <h2>hello,{props.name}</h2> &l ...

  6. React 入门学习笔记整理(四)—— 事件

    1.事件定义 React事件绑定属性的命名采用驼峰式写法,而不是小写. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法) 在类组件中定义函数,通过thi ...

  7. React 入门学习笔记整理(五)—— state

    1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,set ...

  8. React 入门学习笔记整理(六)—— 组件通信

    1.父子组件通信 1)父组件与子组件通信,使用Props 父组件将name传递给子组件 <GreateH name="kitty"/> 子组件通过props接收父组件的 ...

  9. React 入门学习笔记整理(七)—— 生命周期

    (1)react 生命周期 只有类组件有生命周期,函数组件没有生命周期 1.挂载阶段:这些方法会在组件实例被创建和插入DOM中时被调用: 1)constructor(props) 初始化组件的状态.绑 ...

随机推荐

  1. Java 中 List 和 数组之间的转换

    前言:在 java 开发过程中,经常会遇到数组和 list 互转的情况,这里记录一下,免得以后又去到处百度. 一.数组转为 LIST 这里转自 https://www.cnblogs.com/lius ...

  2. 深入浅出图解【计算机网络】 之 【TCP可靠传输的实现2: 超时重传+拥塞控制】

    [前言]上一篇文章介绍了关于TCP的基础知识,以及建立(释放)连接和滑动窗口的概念. 本篇文章将延续上一篇的思路,继续介绍TCP实现可靠传输的机制. 超时重传 上一篇文章里介绍过TCP采用停止等待协议 ...

  3. Spring 中面向AOP之一系列做法

    Spring的AOP实现是通过集成AspectJ框架实现的. 想必这句话大家都知道了吧,不知道也没关系,最起码你现在知道了. 四种实现方案,接下来我们一一去揭开它的神秘的面纱....... 第一种(伪 ...

  4. 项目小结:手机邮箱正则,URL各种判断返回页面,input输入框输入符合却获取不到问题

    1.手机邮箱正则 近两年出来很多新号码,听说199什么的都有了- -导致以前的正则不能用了....这就很难过,总是过一段时间出一种新号码.因此,我决定使用返朴归真的手机正则. 手机正则:var reg ...

  5. visibilitychange:API详解

    利用页面可见性API搞个怪 继各大站点.博客在用console发招聘.玩游戏.埋彩蛋之后(知乎相关链接),小剧似乎又发现了一个好玩儿的东西,目测会火,利用页面可见性API做些小技俩. 页面可见性是什么 ...

  6. Data Encryption Errors After Restoring Microsoft Dynamics CRM Database

    If you’re seeing an error similar to the one above, you’ve probably done a database backup and resto ...

  7. DBFlow(4.2)新版使用

    DBFlow新版使用 一.DBFlow4.2.4介绍 DBFlow是一个基于AnnotationProcessing(注解处理器)的ORM框架.此框架设计为了速度.性能和可用性.消除了大量死板的数据库 ...

  8. textarea高度跟随文字高度而变化

    html部分: <textarea id="textarea">哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽哈喽</textarea> js部分: < ...

  9. 【Java】操作mysql数据库

    package bd; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; im ...

  10. ExpressRoute 路由要求

    若要使用 ExpressRoute 连接到 Azure 云服务,需要设置并管理路由.某些连接服务提供商以托管服务形式提供路由的设置和管理.请咨询连接服务提供商,以确定他们是否提供此类服务.如果不提供, ...