React（一）初识

一 初识React

二 前置知识

三 基本方法

（1） ReactDOM.render是React的最基本方法，用于将模板转为HTML，并插入指定的DOM节点。

           ReactDOM.render{

              <h1>hello.world!<br>

              document.getElementById("example");

};

（2） JSX语法

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以{ 开头），就用 JavaScript 规则解析

var names = [ 'Alice' , 'Emily' , 'Kate' ];

ReactDOM . render (

< div >

{

names . map ( function ( name , index ){

return < div key = { index } > Hello,{ name }! </ div >

})

}

</ div > ,

document . getElementById ( "example" )

);

以数组方式

var arr = [

< h1 > Hello world! </ h1 > ,

< h2 > React is awesome </ h2 > ,

];

ReactDOM . render (

< div > { arr } </ div > ,

document . getElementById ( "example" )

):

（3） 组件

React.createClass 方法就用于生成一个组件类

var HelloMessage = React . createClass ({

render: function () {

return < h1 > Hello { this . props . name } </ h1 > ;

}

});

ReactDOM . render (

< HelloMessage name = "John" /> ,

document . getElementById ( 'example' )

);

•     组件类的第一个字母必须大写，否则就会报错，比如HelloMessage不能写成helloMessage。
  

（4）this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是

this.props.children 属性。它表示组件的所有子节点

var NotesList = React . createClass ({

render: function (){

return (

< ol >

{

React . Children . map ( this . props . children , function ( child ){

return < li > { child } </ li > ;

})

}

</ ol >

);

}

});

ReactDOM . render (

< NotesList >

< span > hello </ span >

< span > world </ span >

</ NotesList > ,

document . getElementById ( "example" )

);

this.props.chlidren 的值有三种可能：

    如果当前组件没有子节点，它就是undefined；

    如果有一个子节点，数据类型是object；

    如果有多个子节点，数据类型就是array。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。

（5）Proptype

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

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

（6）获取真实的DOM节点

        组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM（virtual DOM）。只有当它插入文档以后

才会变成真实DOM。根据React的设计，所有的DOM变动，都先在虚拟DOM上发生，然后再将实际发生的变动部分，反应在真实的DOM上，这种算法叫做DOM diff。

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 >

);

}

});

ReactDOM . render (

< MyComponent /> ,

document . getElementById ( 'example' )

);

       组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

（7）this.state

       组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 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 >

);

}

});

ReactDOM . render (

< LikeButton /> ,

document . getElementById ( "example" )

);

   LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化， this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

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

（8）表单

        用户在表单填入的内容，属于用户跟组件的互动，所以不能用 this.props 读取

var Input = React . createClass ({

getInitialState: function (){

return { value: 'Hello!' };

},

handleChange: function ( event ){

this . setState ({ value:event . target . value });

},

render: function (){

var value = this . state . value ;

return (

< div >

< input type = "text" value = { value } onChange = { this . handleChange } />

< p > { value } </ p >

</ div >

);

}

});

ReactDOM . render ( < Input /> , document . body );

        文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。 textarea 元素、 select元素、 radio元素都属于这种情况，

（9）组件的生命周期

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

• 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 () {

return {

opacity: 1.0

};

},

componentDidMount: 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 ), 100 );

},

render: function () {

return (

< div style = {{ opacity: this . state . opacity }} >

Hello { this . props . name }

</ div >

);

}

});

ReactDOM . render (

< Hello name = "world" /> ,

document . getElementById ( 'example' )

);