React学习总结（一）

React学习总结（一）

JSX是什么

const element = <div><h1 className='title'>Hello, world!</div>

这种在JS中的标签语法就是JSX，他被推荐在React中来描述用户界面。它看起来和HTML相似，然而实际上它会被编译成一个JavaScript对象来描述HTML结构，类似如下：

const element = React.createElement(
    'div',
    null,
    React.createElement(
        'h1',
        { className: 'title' },
        'Hello, world!'
    )
)

之后，通过ReactDOM.render函数来将这个对象渲染成真正的DOM元素，再把DOM插入到页面上，如下：

ReactDOM.render(
    element,
    document.getElementById('root')
)

所以从JSX到我们看到的页面发生了如下过程：

组件

组件是React的核心，它可以将UI切分成一些独立的、可复用的部件，在使用时不同的组件组合在一起。

• 函数定义组件

function Hello(props) {
    return <h1>Hello, {props.name}</h1>
}

函数式组件是一种定义不能使用state的组件，叫做无状态组件（stateless component）。React非常鼓励无状态组件，因为状态会带来管理的复杂性。

• 类定义组件

class Hello extends Component {
    render () {
        return <h1>Hello, {this.props.name}</h1>
    }
}

使用类定义的组件父类为Component，它有setState等公共方法可以使用。组件只能返回一个根React元素，所以如果有多个元素需要一个外围元素包裹起来，如下：

class Hello extends Component {
    render () {
        return (
            <div>
                <h1>Hello, {this.props.name}</h1>
                <h2>Good Weather!</h2>
            </div>
        )
    }
}

state 和 props

父组件通过props向子组件传递数据，使用方法如下

class App extends Component {
    render () {
        return (
            <Hello name='崂山盗汗'>
        )
    }
}

这样，子组件Hello的this.props对象中便有了一个name属性，其中的值为崂山盗汗。在子组件内部，props的值是不可改变的，因为props的用处就是让外部对组件自己进行配置。
state是组件内部的可变状态，和props不同，state是可以在组件内部修改的，修改需要使用this.setState函数改变，如下：

class Hello extends Component {
    constructor (props) {
        super(props)
        // 在这里通过super(props)把props传给父类，这样就可以通过this.props来获取传入的属性
        this.state = {
            isGood: true
        }
    }

    handlerClick () {
        this.setState({
            isGood: !this.state.isGood
        })
    }

    render () {
        return (
            <div>
                <h1>Hello, {this.props.name}</h1>
                <h2>Weather is {isGood?'good':'bad'}</h2>
                <button onClick={this.handlerClick.bind(this)}>点击</button>
            </div>
        )
    }
}

虽然props不可在组件内部修改，但组件的使用者也就是父组件可以主动地通过重新渲染的方式把新的props传入子组件中，而使用setState函数就会导致重新调用render函数渲染，所以父组件将state传入子组件props中，然后修改state即可。
所以总结一下：

• state是让组件控制自己的状态
• props是让外部对组件自己进行配置

尽量多使用props，少使用state。（貌似props的不可变性更符合函数式编程。还待了解......）

组件间通信

前面说到了父组件向子组件传递数据是通过props，那么子组件向父组件传递数据呢？其实是通过调用父组件传递的回调函数，如下：

...// 父组件
constructor () {
    super()
    this.state = {
        data: ''
    }
}

handleSubmit (data) {
    this.setState({
        data: data
    })
}

render () {
    return (
        <div>
            <Hello onSubmit={this.handleSubmit.bind(this)}>
            <h1>{this.state.data}</h1>
        </div>
    ) 
}
...
...// 子组件
handleTest () {
    if (this.props.onSubmit) {
        const str = '传递数据'
        this.props.onSubmit(str)
    }
}

render () {
    <div>
        <input type='button' 
            value='测试'
            onClick={this.handleTest.bind(this)} />
    </div>
}

这样点击子组件的测试按钮时候就能调用handleTest函数，在调用回调onSubmit将字符串传递数据传到父组件的state中。

参考资料：
React文档
React.js小书