react入门(一)

react.js是核心库，react-dom.js提供与DOM相关功能，Browser是将JSX语法转化为js语法
ReactDom.render用于将模板转为HTML语言，并插入指定DOM节点，传两个参数，(object:object,DOM:object)

JSX的语法

html直接写在js中，不加任何引号
js语法写在花括号{ }中

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);

在JSX中不能使用if slse
react使用className和htmlFor代替class和for

JSX表现为对象
Babel编译JSX在React.createElement()调用的时候。
下面两个例子是相似的

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

关于组件，组件类的首字母必须大写，否则会报错，组件类只能包干一个顶层标签，即最外层标签只能有一个
（JSX使用大小写的约定来区分本地组件的类和HTML标签）
向组件传递参数，可以使用this.props对象，对象的属性与组件的属性一一对应，
props属性可以用来组件之间传值。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

但是有一个例外就是this.props.children，表示组件的所有子节点

this.props.children的值

如果组件没有子节点，值为undefined；一个子节点，数据类型是object；如果多个子节点，数据类型是array
react提供了React.Children来遍历子节点而不用担心this.props.children的数据类型

React State

通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。
只需更新组件的state，根据新的state重新渲染用户界面（不要操作DOM）

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 ? '喜欢' : '不喜欢';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。点我切换状态。
            </p>
          );
        }
      });

      ReactDOM.render(
        <LikeButton />,
        document.getElementById('example')
      );

onClick等事件，on之后第一个字母是大写的，小写的事件将不生效

State 和 Props

state和props可以组合使用，可以在父组件中设置state，并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "jjj",
      site: "http://www.baidu.com"
    };
  },
  clickfun:function (){
      this.setState({name:(this.state.name=="jjj"?"aaa":"jjj")});
      console.log(this);
  },
  render: function() {
    return (
      <div onClick={this.clickfun}>
        <p onClick={this.clickfun}>子元素，点击事件生效</p>
        <Name name={this.state.name} onClick={this.clickfun}/>
        <Link site={this.state.site} />
      </div>
    );
  }
});
 
var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});
 
var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

示例中，绑定在顶层元素和子元素p上的事件生效，绑定在子组件Name上的事件不生效，应该是子组件无法获取到父组件上的clickfun函数，因为传值是使用props