React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素。
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
上面代码中，变量 HelloMessage 就是一个组件类。 注意，组件类的第一个字母必须大写，否则会报错
定义一个组件最简单的方式是使用JavaScript函数：
function Welcome() {
return <h1>Hello react</h1>;
}
var HelloComponent = React.createClass({
render:function(){
return Welcome()
}
})
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
组件的用法与原生的 HTML 标签完全一致，可以任意加入属性
function Welcome(props) {
return <h1>Hello {props.name}</h1>;
}
var HelloComponent = React.createClass({
render:function(){
return Welcome(this.props)
}
})
ReactDOM.render(<HelloComponent name="World"/>,document.getElementById('div'))
props属性 下回合再讲
之前写的ReactDOM.render都是DOM元素，然而React元素也可以是用户自定义的组件
function Welcome() {
return <h1>Hello,React</h1>;
}
const element = <Welcome/>; //组件首字母一定要大写
ReactDOM.render(element,document.getElementById('div'))
这里有个需要注意的点就不演示了，return的HTML元素必须存在一个根节点，也就是Vue里面的template模板中总有一个div元素包裹里面的内容
简单演示一下组合模板，后续我们肯定是使用脚手架配置的
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
}
function App(){
return(
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
)
}
ReactDOM.render(<App/>,document.getElementById('div'))
组件中的State
组件总是需要和用户互动的。React的一大创新，就是将界面组件看成一个状态机，用户界面拥有不同状态并根据状态进行渲染输出，用户界面和数据始终保持一致。开发者的主要工作就是定义state，并根据不同的state渲染对应的用户界面
class HelloComponent extends React.Component{
render(){
}
}
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
我们要习惯使用类的方法创建模板，这个格式要格外清晰，并且render是必须存在的
在React中，我们使用 getInitialState声明状态
class HelloComponent extends React.Component{
getInitialState(){
return {enanble:false}
},
render(){
}
}
首先需要注意的是，getInitialState一定存在返回值，并且它是一个函数，这个类似Vue中的data
接下来写一个点击事件，在React中点击事件是handleClick
class HelloComponent extends React.Component{
getInitialState(){
return {enanble:false}
},
handleClick(){
this.setState({enable:!this.state.enable})
},
render(){
}
}
简单说一下setState，通知React组件数据发生变化的方法是调用成员函数setState(data,callback)。这个函数会合并data到this.state,并重新渲染组件。渲染完成后，调用可选的callback回调。（大部分情况下不需要调用回调，因为React会负责把界面更新到最新状态）
由于React是单向数据流，所以只能使用此方法改变State
接下来渲染一个DOM并且加上点击事件
class HelloComponent extends React.Component{
getInitialState(){
return {enanble:false}
},
handleClick(){
this.setState({enable:!this.state.enable})
},
render(){
return <p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}>更改State</button>
</p>
}
}
刚才卡了比较久，编译出现BUG，查阅资料后发现class的写法舍弃了 getInitialState函数，ES5是可以有的，并且规定state在constructor中实现
class HelloComponent extends React.Component{
constructor(props){
super(props);
this.state={enable:false}
}
handleClick(){
this.setState({enable:!this.state.enable})
}
render(){
return(
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}>更改State</button>
</p>
)
}
}
ReactDOM.render(<HelloComponent/>,document.getElementById('div'))
更改了一下代码，可以记一下这个格式，ES6类的写法初始化，除去handleClick
这里需要注意的是触发条件，onClick此处的C是大写。因为JSX更接近JS而不是HTML，所以使用小驼峰
运行页面触发事件发现报错
此处也是ES6写法的坑，解决方法很多，推荐第一种
constructor(props){
super(props);
this.state={enable:false}
this.handleClick = this.handleClick.bind(this)
}
在构造器中将事件的this绑定实例，因为在JavaScript中，类中的方法默认不绑定this，绑定this之后就OK了
网友评论