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工程(学习笔记)

1.在本地新建一个文件夹例如:Hello React 2.把解压好的React包中的build 复制粘贴到Hello React文件中。 3.用ATOM打开Hello React这个文件 工程结构 如...

react native 学习笔记----使用Flexbox布局

Flexbox可以在不同屏幕尺寸上提供一致的布局结构 一般来说,使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。 flex...

React Native入门学习笔记一(环境搭建windows+android)

win+android开发环境搭建装备工作:需要安装jdk、android sdk、nodejs、git安装参考网站:http://facebook.github.io/react-native/do...
  • xundh
  • xundh
  • 2016-06-19 23:09
  • 817

react学习笔记

JSX是js的一种语法扩展,在React中用于描述UI。 在JSX中使用{}嵌入任何js表达式 多行JSX最好使用括号wrap 编译后,JSX表达式成为常规的JavaScript对象。因此可以在if或...

React学习笔记(1)

webpack +reactjs+ant design

react-router学习笔记之入门

一 创建一个项目 环境要求:node,npm git clone https://github.com/reactjs/react-router-tutorial cd react-route...

React 学习笔记(1)--Windows环境搭建

React 学习笔记 一、React Native环境搭建 1、下载安装jdk 2、下载安装sdk 可以先安装Android Studio,然后使用其中的工具进行安装 可以用http://andr...

React && Redux 学习笔记(一)

介绍react的一些基本的知识

React-Native学习笔记之生命周期

React-Native学习笔记之生命周期

React学习笔记--通过Redux 的三个基本原则来理解Redux

澄清一个事实严格的说来,Redux属于一种编程思想,类似于Flux,但是不同于Flux, Redux中并没有 dispatcher 的概念。事实上Redux 和 React 之间没有任何直接的关系。R...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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