React 内部属性与函数

标签：cond   ntb   解决   log   error   als   node   数据结构   cti   

constructor

1. 构造函数，在创建组件的时候调用一次。
2. 例子：

   class TodoList extends React.Component {
       constructor(props, context){
          super(props)
       }
   }

    

getInitialState

1. 在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
2. 例子

   React.createClass({
     getInitialState: function() {
       return {liked: false};
     },
     render: function() {
   　　...
     }
   });

    

getDefaultProps

1. 在组件类创建的时候调用一次，然后返回值被缓存下来。
2. 如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。
3. 该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。
4. 例子

   React.createClass({
     getDefaultProps: function() {
       return {liked: false};
     },
     render: function() {
   　　...
     }
   });

    

propTypes

1. 组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求
2. 例子

   React.createClass({
     propTypes: {
       optionalArray: React.PropTypes.array,
       optionalBool: React.PropTypes.bool,
       optionalFunc: React.PropTypes.func,
       optionalNumber: React.PropTypes.number,
       optionalObject: React.PropTypes.object,
       optionalString: React.PropTypes.string,
   
       // 所有可以被渲染的对象：数字，字符串，DOM 元素或包含这些类型的数组。
       optionalNode: React.PropTypes.node,
   
       // React 元素
       optionalElement: React.PropTypes.element,
   
       // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
       optionalMessage: React.PropTypes.instanceOf(Message),
   
       // 用 enum 来限制 prop 只接受指定的值。
       optionalEnum: React.PropTypes.oneOf([‘News‘, ‘Photos‘]),
   
       // 指定的多个对象类型中的一个
       optionalUnion: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.number,
         React.PropTypes.instanceOf(Message)
       ]),
   
       // 指定类型组成的数组
       optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
   
       // 指定类型的属性构成的对象
       optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
   
       // 特定形状参数的对象
       optionalObjectWithShape: React.PropTypes.shape({
         color: React.PropTypes.string,
         fontSize: React.PropTypes.number
       }),
   
       // 以后任意类型加上 `isRequired` 来使 prop 不可空。
       requiredFunc: React.PropTypes.func.isRequired,
   
       // 不可空的任意类型
       requiredAny: React.PropTypes.any.isRequired,
   
       // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
       customProp: function(props, propName, componentName) {
         if (!/matchme/.test(props[propName])) {
           return new Error(‘Validation failed!‘);
         }
       }
     }
   });

    

ref

1. 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，只有当它插入文档以后，才会变成真实的 DOM 。
2. 所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上
3. 需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性
4. 例子

   <input type="text" ref="myTextInput" />
   this.refs.myTextInput.focus();

    

this.props.children

1. this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点

mixins

1. 组件是 React 里复用代码最佳方式，但是有时一些复杂的组件间也需要共用一些功能。React 使用 mixins 来解决这类问题。
2. 例子：一个简单的 mixin，使用 setInterval() 并保证在组件销毁时清理定时器。
3. 关于 mixin 值得一提的优点是，如果一个组件使用了多个 mixin，并用有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。

4. var SetIntervalMixin = {
     componentWillMount: function() {
       this.intervals = [];
     },
     setInterval: function() {
       this.intervals.push(setInterval.apply(null, arguments));
     },
     componentWillUnmount: function() {
       this.intervals.map(clearInterval);
     }
   };
   
   var TickTock = React.createClass({
     mixins: [SetIntervalMixin], // 引用 mixin
     getInitialState: function() {
       return {seconds: 0};
     },
     componentDidMount: function() {
       this.setInterval(this.tick, 1000); // 调用 mixin 的方法
     },
     tick: function() {
       this.setState({seconds: this.state.seconds + 1});
     },
     render: function() {
       return (
         <p>
           React has been running for {this.state.seconds} seconds.
         </p>
       );
     }
   });
   
   React.render(
     <TickTock />,
     document.getElementById(‘example‘)
   );

    

statics

1. statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用
2. 例子

   var MyComponent = React.createClass({
   
       statics: {
   
   　　        customMethod: function(foo) {
   
   　　　　        return foo === ‘bar‘;
   
           }
   
       },
   
       render: function() {
   
       }
   
   });
   
   MyComponent.customMethod(‘bar‘); // true

    

React 内部属性与函数

标签：cond   ntb   解决   log   error   als   node   数据结构   cti   

原文地址：http://www.cnblogs.com/vs1435/p/7341399.html