react中定义组件的两种方法【函数方式、class方式】

一、函数方式

函数方式定义组件时，需注意以下几点：

1. 组件名开头大写
2. 只能有一个根元素
3. 标签要闭合
4. 获取开始和闭合标签的内容要用 props.children（pops值不能修改）

const Welcome = (props)=>{
            return(
                <div>
                    <h1>欢迎{props.name}</h1>
                    <p>{props.content}</p>
                    {props.children}
                </div>
            )
        }

        ReactDOM.render(
            <Welcome name="你们" content="inspiring">欲穷千里目，更上一层楼</Welcome>,
            document.getElementById('root')
        )

父组件向子组件传值用props

二、class方式

class Welcome extends React.Component {
            render() {
                return (
                    <div>
                        <h1>欢迎{this.props.name}</h1>
                        <p>{this.props.content}</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Welcome name="你们" content="inspiring">欲穷千里目，更上一层楼</Welcome>,
            document.getElementById('root')
        )

与函数方式不同的是，父组件向子组件传值时，用this.props.接收

应用

实现：点击按钮，实现数字+1功能

class Count extends React.Component{
            constructor(){
                super();
                // state中存值，可变
                this.state = {
                    num:100
                }
                // 修改自定义方法中的this指向
                this.addHandle = this.addHandle.bind(this)
            }
            addHandle(){
                // 修改state
                this.setState({
                    num:this.state.num+1
                })

            }
            render(){
                return (
                    <div>
                        <h1>{this.state.num}</h1>
                        <button onClick={this.addHandle}>add</button>
                    </div>
                )
            }
        }

        ReactDOM.render(
            <Count></Count>,
            document.getElementById('root')
        )

初始值存在this.state={}中，修改时在this.setState({})中修改；特别要注意的是，需要通过bind修改自定义方法的this指向，如果不修改，this值为undefined；