创建好了react项目结构之后，就需要我们写一堆的组件了，目前react组件有两种常用的写法：
1，函数组件：
import React from 'react';
function LogIn(props){
return(
<button>登录</button>
)
}
export default LogIn;2，class组件：
import React from 'react';
class LoginControl from React.Component{
constructor(props){
//数据初始化
super(props);
}
componentWillMount(){
//数据已经初始化，但是还没有渲染dom,一般很少用
}
componentDidMount(){
//第一次渲染dom,在这里可以请求ajax,并setDate重新渲染数据
}
componentWillReceiveProps(){
//在接受父组件改变后的props需要重新渲染组件时用的比较多
}
componentWillUnmount(){
//卸载和数据销毁
}
render() {
/*js处理*/
return (
<div>
</div>
)
}
}
export default HomePage1;
相信JSX渲染都不会陌生了，这里就不多说了，直接用{}大花括号渲染就行了， 注意必须是有效的 JavaScript 表达式。
接下来我重点说明一点，在react中的事件处理，以及props这个重要的属性，还有就是子父组件之间的如何使用以及如何传递参数等。以下基于class组件：
拿官网给的登录，退出来为例：
首先写个登录和退出的小组件：
登录：
import React from 'react';
function LogIn(props){
console.log(props)
return(
<button onClick={props.onClick}>登录</button>
)
}
export default LogIn;退出：
import React from 'react';
function LogOut(props){
console.log(props)
return(
<button onClick={props.onClick}>退出</button>
)
}
export default LogOut;接下来我要写个登录控制器来渲染上面的组件：
import React from 'react';
import LogOut from "./LogOut";
import LogIn from "./LogIn";
class HomePage1 extends React.Component {
constructor(props){
//数据初始化
super(props);
this.logIn = this.logIn.bind(this);
this.logOut = this.logOut.bind(this);
this.state = {
a:1,
b:2,
c:3,
isLogin:false,
user:null
}
}
componentWillMount(){
//数据已经初始化，但是还没有渲染dom,一般很少用
}
componentDidMount(){
//第一次渲染dom,在这里可以请求ajax,并setDate重新渲染数据
}
componentWillReceiveProps(){
//在接受父组件改变后的props需要重新渲染组件时用的比较多
}
componentWillUnmount(){
//卸载和数据销毁
}
//写任何想写的方法******************
logIn(e){
alert("登录了")
this.setState({
isLogin:true,
user:e
})
}
logOut(){
alert("退出登录了")
this.setState({
isLogin:false,
user:null
})
}
render() {
let button;
if(this.state.isLogin){
button = <LogOut onClick={this.logOut}/>
}else{
button = <LogIn onClick={(e)=>this.logIn('admin',e)}/>
}
return (
<div>
<h1>Hello，{this.state.a+this.state.b}</h1>
{button}
<p>{this.state.user}</p>
</div>
)
}
}
export default HomePage1;
其中，我对我学习中碰到的问题简略的说一下：
1.刚开始学习react,竟然不知道在哪里写个自己的方法，经过翻查文档以及度娘，才知道，直接在class组件中写就行了，当然方法写完了，要去触发他，接下来怎么触发呢，又是个问题，react给提供了两种：
1.1 在constructor构建中写入this.LogIn=this.LogIn.bind(this); 具体为什么这样写，文档给的已经很清楚了，然后在return的元素中开始触发onClick="{this.Login}"就可以了，，，
1.2在写方法的时候，使用箭头函数，Login = () =>{},然后在return的元素中开始触发onClick="{this.Login}"就可以了，，，
等，，，，，我如果想穿参数怎么办呢？？官网也给了两种方法：
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。 （我习惯性的用第一种方法了）
2.对于props这个属性，官网也给提出了，非常重要的属性，写这个小案例的时候我就采坑了。。。。props主要用于组件之间的参数传递。
2.1父子传值。
.向下传值--父组件向子组件传值
父组件通过props传递一个不是方法的数据，给子组件；
//父组件中
<Child data={[1,2,3]} />
//子组件中
console.log(this.props.data);2.向上传值--子组件向父组件传值
父组件通过props向子组件传入一个方法，子组件在通过调用该方法，并将数据以参数的形式传给父组件，父组件可以在该方法中对传入的数据进行处理；
//父组件
import Child from './Child.js'；
export default class Parent extend compenent{
getData=(data)=>{
console.log(data);
}
render(){
return (
<div>
父组件
<Child getData={this.getData}/>
</div>
)
}
}
//子组件
export default class Child extend compenent{
state={
data:[1,2,3]
}
render(){
const {data}=this.state;
return (
<div>
子组件
<button onClick={()=>{this.props.getData(data)}}><button>
</div>
)
}
}