React 基础入门，基础知识介绍

React不管在demo渲染还是UI上，都是十分方便，本人菜鸟试试学习一下，结合阮一峰老师的文章，写下一点关于自己的学习react的学习笔记，有地方不对的地方，希望各位大牛评论指出；

react包引入，在标签里引入包；

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

      // ** Our code goes here! **

    </script>

  </body>

</html>

首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

当然在最后编译的时候可以直接使用JSx ，引入一个 JSXTransformer.js 就可以直type中看使用text/Jsx 这样的好处是在我的编译器（webstorm）中有关键词的颜色区分；

<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
          ReactDOM.render(
            <h1>Hello, world! </h1>,
            document.getElementById('example')
          );
</script>
</body>
</html>

1.基础语法：

ReactDom.render 工三个参数，第一个元素，第二个是绑定的元素，第三个是回调函数

JSX语法：遇到<>开头用 HTML语法解析，遇到{} 用javascript 解析；

ReactDom.render(

<div>

{

names.map(function (name) {

//这里可以定义变量

return <div>Hello, {name}!</div>

})

}

</div>,

document.getElementById('example')

)

2.组件

var NewString = React.createClass({
    render: function () {
var s=<h1 className="two" id="two">
     <i id="one" >MMMMMM{this.id},{this.props.name},{this.props.id},{this.props.className}
     </i></h1>;
        return s;
    }
})

组件的属性可以在组件类的 this.props 对象上获取。

就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，

必须包括一个且只能包括一个顶层标签；

组件可使用单双标签，没区别，但是当需要获取组件的子元素的时候，必须使用双标签。

双标签获取组件下面的子类：

我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object

3.PropTypes

var MyTitle = React.createClass({

propTypes: {

title: React.PropTypes.string.isRequired,

render: function() {

return <h1> {this.props.title} </h1>;

}});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串。现在，我们设置 title 属性的值是一个数值。

这样一来，title属性就通不过验证了

4.getDefaultProps

getDefaultProps : function () {

return {

title : 'Hello World'

};

render: function() {

return <h1> {this.props.title} </h1>;

}});

getDefaultProps 设置默认title的值。

ReactDOM.render(

<MyTitle />,

document.body);

当组件上没有title，this.props.title的值等于默认值：Hello World；

ReactDOM.render(

<MyTitle title=“New title”/>,

document.body);

当组件上有title，this.props.title的值：New title；

5、获取真实的DOM节点（ref）

var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput111.focus();
    this.refs.pp.style.color="red";
  },
  output:function(){
    alert("wo xtet")
  },
  getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  },
  render: function() {
    return (
      <div>
        <input type="text" ref="myTextInput111" onClick={this.output} />
        <input type="button" value="Focus the text input" onClick={this.handleClick}/>
        <p ref="pp">{this.props.title}</p>
      </div>
    );
  }
});

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

文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。并且可以操作这个DOM，和原生操作Js一样

6、This.state

在组件内可以定义状态，当用户改变这个状态的时候，页面会重新渲染。

getInitialState 是关键字，来定义组件状态

var LikeButton = React.createClass({
  getInitialState: function() {
    return {
      liked11: false,
      love:true
    };
  },
  handleClick: function(event) {
    this.setState({liked11: !this.state.liked11});
    this.setState({love:!this.state.love})
  },
  render: function() {
    var text = this.state.liked11 ? 'like' : 'haven\'t liked';
   var text1=this.state.love?"love":"hate";
    return (
      <p>
        You {text} this. Click to toggle.
        <br/>
        <span onClick={this.handleClick}>you {text1} this.clcik to tpggle</span>
      </p>
    );
  }
});

当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

7.表单

this.props.value 读取组件的属性（代码黄色处），而要定义一个 onChange 事件的回调函数，通过表单元素用 event.target.value

非表单用event.target.innerHTMl 操作节点一样方式

ReactDOM.render(<Input value="!@21"/>, document.getElementById('example'));

8.组件的生命周期

组件的生命周期分成三个状态：

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)：组件判断是否重新渲染时调用

附带代码：

var Hello = React.createClass({
        getInitialState: function () {
          console.log(this);
          return {
            opacity: 1.0
          };
        },
        componentWillMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
              opacity = 1.0;
            }
            this.setState({
              opacity: opacity
            });
//bind(this) 你可以当做是使用外部的this(React组件的)覆盖函数中的this.
          }.bind(this), 100);
        },
        render: function () {
          return (
            <div style={{opacity: this.state.opacity}}>
              Hello {this.props.name}
            </div>
          );
        }
      });