react-基础(1)

props

创建组件

• React.createClass;
• 直接继承React.Component;与上面不同的是初始化props和state的方法；

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

组件属性

• class和for是JavaScript的保留字,改用className, HtmlFor;

this.props

• this.props对象的属性与组件的属性一一对应
• 但是有一个例外，就是this.props.children, 它表示组件的所有子节点;可以用来控制其他组件插入的位置
• 注意，只有当子节点多余1个时,this.props.children才是一个数组,否则是不能用map方法;
• 一次性插入多个属性: {...props};

var App = React.createClass({
  render: function () {
    var props = {name: 'name', age: 'age'};
    return (<div {...props}></div>)
  }
});
//
var BHeart = React.createClass({
    render: function () {
       return (<span {...this.props} >Heart</span>)
    }
});
//
<Component {...this.props} more="values" />

PropTypes属性

• 验证组件实例的属性是否符合要求,否则报Warning;
• 检验类型，之检验存在的props;

propTypes: {
    // 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,
   // A React element.
    optionalElement: React.PropTypes.element,
   //JS's instanceof operator.
    optionalMessage: React.PropTypes.instanceOf(Message),
   // 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
    })
}

• 检验是否存在

propTypes: {
  requiredFunc: React.PropTypes.func.isRequired
}

• 特定的检验

propTypes: {
  customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
}

getDefaultProps方法

• 可以用来设置组件属性的默认值;

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});

• 验证有且只有一个子元素;

var MyComponent = React.createClass({
  propTypes: {
    children: React.PropTypes.element.isRequired
  },

  render: function() {
    return (
      <div>
        {this.props.children} // This must be exactly one element or it will throw.
      </div>
    );
  }

});

• 验证有且有多个元素；

 propTypes: {
      children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
 }

测试时输出组件

<FancyCheckbox checked={true} onClick={console.log.bind(console)} />

状态机

• getInitialState方法初始化;

this.setState方法

• 改变状态；每次会触发重新渲染 UI；

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

• 可以定义一个回调函数；

• this.props和this.state都用于描述组件的特性;前者表示那些一旦定义，就不再改变的特性，而后者是会随着用户互动而产生变化的特性。

虚拟DOM

this.refs

• ref: 向下搜索，可以定义在当前节点上，也可以定义在当前子组件上再向下查找；
• 使用函数定义:

componentDidMount: function() {
    this._input.focus();
},
render: function() {
    return <TextInput ref={(c) => this._input = c} } />;
}

//
render: function() {
    return (
      <TextInput
        ref={function(input) {
          if (input != null) {
            input.focus();
          }
        }} />
    );
  },

调用其他组件的方法

• 调用下层组件方法

   var InputComponet = React.createClass({
    reset: function (value) {
      console.log(value);
    },
    render: function () {
      return(
      <input/>)
    }
   })
   var Btn = React.createClass({
      change: function(event){
        this.refs.myInput.reset('value');
      },
      render: function() {
        return (
          <div>
          <button onClick={this.click}>
          <InputComponet  ref='myInput'/>
          </div>
       );
     }
   });

• 调用上层组件方法

   var Btn = React.createClass({
    click: function () {
      this.props.click('value');
    },
    render: function () {
      return(
      <button onClick={this.click} />)
    }
   })
   var Div = React.createClass({
      click: function(value){
        console.log(value)
      },
      render: function() {
        return (
          <div>
          <Btn click={this.click}>
          </div>
       );
     }
   });

React.findDOMNode方法

• 从组件获取真实DOM的节点;

var MyComponent = React.createClass({
  handleClick: function() {
    React.findDOMNode(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>
    );
  }
});

• getDOMNode: 与React.findDOMNode类似，但考虑到es6应该弃用;

• 定义元素属性: data-x, aria-x;

• 定义样式: style={{display: 'none'}};