react 学习记录（二）

写在前面

加班几天，懒了几天，今天手痒，打打react

来源：http://www.ruanyifeng.com/blog/2015/03/react.html

demo6

属性可以接受任意值，字符串、对象、函数等等都可以

这时候突然想不起属性是什么鬼   ┏┛墓┗┓...(((m -__-)m

ReactDOM.render(
        <MyTitle title={data} />,
        document.getElementById('example')
      );

title={data}叫属性

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

组件类——》复习下

var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isRequired,
        },

        render: function() {
          return <h1> {this.props.title} </h1>;
        }
      });

propTypes: {
          title: React.PropTypes.string.isRequired,
        },

字符串，必须的，

注意最后还有个逗号‘，’

var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

这样一来，title属性就通不过验证了。控制台会显示一行错误信息。

注意这里的不过不是没办法执行，而是在控制台报错。

getDefaultProps 方法可以用来设置组件属性的默认值

------------------------------------------------这里加个分割线

demo7

react基于虚拟dom，但是像input这样需要真实dom的情况下才可以获取

顺序是这样的

在react中

创建类

var MyComponent = React.createClass({

    ... ...

    render:function(){

        return(  虚拟dom  );

    }

})

之后在虚拟dom中如果有需要被取值等之类的（真实dom）

<div>
        <input type="text" ref="myTextInput" />
        <input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>

调用点击时间，函数的调用注意之前讲过的“{”之后当成js 所以在html中为this.handleClick，调用方法

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>
    );
  }
});

之后就是this，谁调用，指向谁，外面是通过this.handleClick调用的。所以显而易见这是的this还是指向整个构造类对象，this.refs.myTextInput.focus();

this.真实dom对象{}.对象名字.方法/属性

------------------------------------------------这里加个分割线

demo8

组件有个状态机

this.state = {} //里面存个对象

初始化用getInitialState 绿色

返回一个对象就是给this.state的

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.setState，修改状态 红色

ps：ps：ps：每次修改以后，自动调用 this.render 方法（更新dom）

this.props 表示那些一旦定义，就不再改变的特性，

this.state 是会随着用户互动而产生变化的状态。

未完待续