react组件

创建组件

    react创建组件的方式有两种，一种是通过函数定义一个组件，一个是通过class类定义一个组件。需要注意是是，组件名的首字母必须要大写。
    通过函数创建一个组件：

function HW() {
	// return中的内容为页面上显示的内容
	//每一个组件只能有一个根节点
	//定义样式的时候使用classname
       return (
	       <div>
	           <h1 className="one">Hello World</h1>
	           <p>新的一行</p>
	        </div>
	        )
    }
    //在页指定的位置显示该组件，第一个参数是组件名，第二个参数是需要展示该组件的节点
    ReactDOM.render(<HW/>,document.getElementById('app'))

    通过class类定义一个函数

class  Person extends React.Component {
	//每一个通过class定义的组件都包含一个局部状态的state，state中的值可以使用this.state.xxx获取
	//每一次state中的数据发生改变之后都会重新执行render方法
	//改变state中的数据，需要使用setState方法
	constructor(props){
       super(props)
         this.state={
             count:1 
         }
    }

	addCount(){
		this.setState({
			count:this.state.count +1
		})
	}

	render () {
		return (
			<div>
			// 直接调用方法的时候要在方法后加bind绑定当前组件的this，通过函数调用的时候不需要
				<p onClick={this.addCount.bind(this)}>我是一个class定义的组件，当前count中的值为：{this.state.count}</p>
				<button onClick={() => this.addCount()}></button>
			</div>
			)
	}
}
ReactDOM.render(<Person />,document.getElementById('app'))

父子组件之间的传值

父组件向子组件传值使用props；子组件向父组件传值通过方法调用

//父组件   
class People extends React.Component {
    constructor(){
        super()
        this.state={
            count1:1 ，
            step:2
        }
    }
    from(v){
        console.log(v)  
        this.setState({
            count1:v
        })            
    }
    render (){
        return (
            <div>
                <p style={{color:'red'}}>{this.state.count1}</p>
                <Person step={this.state.step} call={this.from.bind(this)} />               
            </div>
        )
    }
}
// 子组件
class Person extends React.Component {
   constructor(props){
        super(props)
        this.state={
            count:1 
        }
    }
    add(){
        const {step,call}=this.props
        let count = this.state.count+this.props.step;
        // 改变state中的数据使用setState方法，setState是异步的，
        // 第一个参数是state中的数据
        // 第二个参数是成功之后的回调函数
        this.setState(
            {count},
            function(){
                console.log("修改数据完成")
                //调用父组件的方法
                call(this.state.count)
            }
        ) 
    }
    //每一次state中的数据发生改变之后render方法都会重新执行
    //通过class定义组件，进行事件绑定时要使用.bind(this)把当前实例绑定到该事件内
    render(){
        //通过state.定义的局部状态可以直接获取到
        const { count } = this.state
        return (
            <div>
                <p>我是通过class定义的组件</p>
                <p>当前显示的数字为：{this.state.count}</p>
                <p onClick={this.add.bind(this)}>当前显示的数字为：{count}</p>
                <button onClick={()=>this.add()}>按钮</button>
            </div>
            )
    }
}

  上述代码表示,把父组件中的step传递给子组件，通过在子组件中的props接受父组件传递过来的属性，此时打印子组件中的props，结果是{step:2,call:f}。把子组件中的count传递给父组件，需要在子组件中调用父组件传递过来的方法call，将子组件的count值作为参数传递给父组件。
  以上是我对react中组件的创建和传值的理解，如果有理解错的或者表述不当的地方，欢迎各位同行和大牛指出问题。