react学习笔记

原创 2016年06月01日 16:58:04

组件的生命周期

  • 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):组件判断是否重新渲染时调用

组件的生命周期在不同状态下的执行顺序

  • 当首次装载组件时,按顺序执行 getDefaultProps、getInitialState、componentWillMount、render 和 componentDidMount
  • 当卸载组件时,执行 componentWillUnmount
  • 当重新装载组件时,此时按顺序执行 getInitialState、componentWillMount、render 和 componentDidMount,但并不执行 getDefaultProps
  • 当再次渲染组件时,组件接受到更新状态,此时按顺序执行 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render 和 componentDidUpdate

这些方法的官方介绍

基本模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

双向绑定

  • onChange事件
var NoLink = React.createClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  handleChange: function(event) {
    this.setState({message: event.target.value});
  },
  render: function() {
    var message = this.state.message;
    return <input type="text" value={message} onChange={this.handleChange} />;
  }
});

笔记

  1. JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析
  2. React.createClass 方法用于生成一个组件类,组件类的第一个字母必须大写
  3. getInitialState:初始化方法,定义state
  4. this.props:与组件的属性一一对应
  5. this.props.children:表示组件的所有子节点
  6. class 属性需要写成 className,for 属性需要写成 htmlFor
  7. getDefaultProps:设置组件属性的默认值
  8. this.refs.[refName]:获取真实的DOM节点
  9. this.state.<状态变量名>:访问状态变量
  10. this.setState方法:修改状态值
  11. propTypes:{}:验证组件属性,配合isRequired,保证属性是必须的
  12. mixins:[]:Mixins混合函数对象,抽取公用函数为对象,ES6语法不支持
  13. es6语法class声明组件需要.bind(this):组件函数没有自动绑定到this,class的写法,元素上调用组件的函数,需要手动.bind(this)

propTypes更多验证类型

React.createClass({
  propTypes: {
    // You can declare that a prop is a specific JS primitive. By default, these
    // are all optional.
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
    // Anything that can be rendered: numbers, strings, elements or an array
    // (or fragment) containing these types.
    optionalNode: React.PropTypes.node,
    // A React element.
    optionalElement: React.PropTypes.element,
    // You can also declare that a prop is an instance of a class. This uses
    // JS's instanceof operator.
    optionalMessage: React.PropTypes.instanceOf(Message),
    // You can ensure that your prop is limited to specific values by treating
    // it as an enum.
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
    // An object that could be one of many types
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),
    // An array of a certain type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
    // An object with property values of a certain type
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
    // An object taking on a particular shape
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),
    // You can chain any of the above with `isRequired` to make sure a warning
    // is shown if the prop isn't provided.
    requiredFunc: React.PropTypes.func.isRequired,
    // A value of any data type
    requiredAny: React.PropTypes.any.isRequired,
    // You can also specify a custom validator. It should return an Error
    // object if the validation fails. Don't `console.warn` or throw, as this
    // won't work inside `oneOfType`.
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

参考

React 入门实例教程

React 源码剖析系列 - 生命周期的管理艺术

React参考Blog

版权声明:本文为博主原创文章,转载请注明出处。

React全家同学习之ES6之字符串的扩展

ES6加强了对Unicode的支持,并且扩展了字符串对象。 1、字符的Unicode表示法 JavaScript 允许采用 \uxxxx形式表示一个字符,其中“XXXX”表示字符的码点。但是这种表...
  • yangchunshang
  • yangchunshang
  • 2017年12月07日 20:29
  • 86

《React精髓》学习笔记

《React 精髓》虽然没有最新的Reduce,但是还是值得一看。一、给项目安装必要的工具React牛在何处?–React将命令式的API包装成为声明式的API,React牛在改变了我们的编写代码的方...
  • i10630226
  • i10630226
  • 2017年02月10日 17:53
  • 524

React Native学习笔记(二)JSX 语法学习

1.什么是JSX JSX并不是一门新的语言,而仅仅是个语法糖,允许开发者在JavaScript中书写HTML语法。实际上,每个HTML标签最终转化为了JavaScript代码来运行。 React的...
  • weimeng809
  • weimeng809
  • 2016年05月22日 23:08
  • 2394

react学习心得(1)

ReactDOM.render()  实例化根组件,启动框架,注入标记到原始的DOM元素中 getInitialState() 在生命周期里只执行一次,并设置组件的初始状态 componentDi...
  • qq_26943485
  • qq_26943485
  • 2017年02月07日 14:25
  • 258

React笔记:开始吧~

React笔记:开始吧~
  • u014328357
  • u014328357
  • 2016年12月07日 16:48
  • 171

react-native学习路线总结

本人新手web前端程序员一枚,应公司要求学习react-native框架,作为博客萌新来讲讲我这一个月学习历程,新人和前端的朋友们可以一看,其他都可看,反正不用你掏钱啊。 首先当然还是介绍一下rea...
  • u014168594
  • u014168594
  • 2016年09月21日 17:23
  • 6490

关于React native 的总结和笔记

React Native 复习生命周期 关于React Native,我知道的不多
  • Hankins_Pan
  • Hankins_Pan
  • 2017年07月30日 19:58
  • 217

Linux学习笔记之——起始篇

摘要:学习笔记目录、方便以后回顾、没有什么捷径可走、不断的记录、总结、练习、coding、coding。...
  • chenghuaying
  • chenghuaying
  • 2014年03月31日 16:47
  • 4550

ReactJS学习系列课程(React react常用架构分析)

最近学习React框架,与其说react是一个新的框架,不如过React是一个新的思想,新的尝试,做惯了前端框架的工程师都知道,MVC,MVVM一直被大家公认为一个非常不错的模式,但是Facebook...
  • jiangbo_phd
  • jiangbo_phd
  • 2016年06月28日 11:54
  • 2912

在计算机学习,善用“笔记软件”

为知笔记 Linux 版 2015-12-03 产品更新 提示:软件的名称由wiznote修改为WizNote,在终端命令行下需要使用WizNote来打开程序。 更新日志: 2.3.2 版本(201...
  • Lina_ACM
  • Lina_ACM
  • 2016年08月03日 10:41
  • 801
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react学习笔记
举报原因:
原因补充:

(最多只允许输入30个字)