这一节内容主要以了解为主。
渐渐的体会react的语法和其特性。
① htmlAndJs 混合编写
react和以往的前后台书写方式不一样。
在之前的多个语言中，讲求的是将页面代码和js代码逻辑分开，包括原来的css文件都有独立的分装。
而react的提供了一种html和js语句混合编写的方式。这就是jsx。
先不详说，体会一下先：
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2> ];
//将html装到数组里面
ReactDOM.render( <div>{arr}</div>, document.getElementById('app'));
② props和省略号语法
props对象的属性与组件的属性一一对应.
'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
//声明一个组件类，叫MyTitle
class MyTitle extends Component{
show(){
console.log(this.props.title);
console.log(this.props.contents);
console.log(this.props.name);
}
//渲染组件：一个按钮，并可以点击。
//注意bind(this)的写法，这是jsx语法要求的
//如果嫌麻烦也可以使用箭头函数。
render(){
return (<button onClick={ this.show.bind(this) }> click </button>);
}
}
//要向组件传递的数据
var data = {title:'this is a title',contents:'this is contents'};
ReactDOM.render(
<MyTitle {...data} name={'my name'}/>,
document.getElementById('app')
);
上述代码实际上渲染出来的是一个button。
详细的说明看我的注释就好了。
③ this.props.children
在这个属性中获取传入的dom的节点信息。
可以用 React.Children.map方法遍历。
'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class NodeList extends Component{
render(){
return(
<ul>
{
//遍历this.props.children节点
React.Children.map(this.props.children,function(child){
return (<li>{child}</li>);
})
}
</ul>
);
}
} ReactDOM.render(
<NodeList>
<span>hello</span>
<span>world</span>
</NodeList>,
document.getElementById('app')
);
参考：https://github.com/ZhangWeiStudy/React