react学习之 组件、props和 state

一、react五大特点：

1. 声明式代码： react 面向数据编程，不需要直接去控制DOM，你只要把数据控制好，react 自己回去帮你操作dom，这就是声明式开发。（不在乎过程，只在乎结果，只在乎数据，不操作DOM）

2. 高效：react 通过对DOM 的模拟，最大限度地减少与DOM的交互

3. 灵活： react 可以与已知的库或框架很好的配合

4. JSX: JSX 是 JavaScript 语法的扩展（React 开发不一定使用 JSX ，但我们建议使用它。）

5. 组件化：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中   

         组件化有两个显著的特点：

         1）封装：一个组件所需的数据封装于组件内部；

         2）组合：一个组件可以与其他组件通过组合的方式实现更加复杂的业务逻辑；

6. 单向数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。由上至下（DOM树），数据流更加清晰，组件状态更可控。(数据一层一层向下传递，不可逆)

   PS: Vue 也是单向数据流，但有双向绑定功能。

          

二、组件

1. 工厂组件（简单组件）：

<script>
    function Simple () {
        return <h2>简单组件</h2>
    }
    ReactDOM.render(<Simple />, document.getElementById('app'))
</script>

2. ES6 类组件（复杂组件）：

<script>
   
    class Complex extends React.Compooonent {
        render() {
            return <h2>复杂组件</h2>
        }
    }
    ReactDOM.render(<Simple />, document.getElementById('app'))
</script>

注意： React 组件标签一定要闭合

 

三、

state: 组件内部定义的数据

props: 可在组件之间传递数据（父子组件）

兄弟组件之间不能直接通信，但我们可以通过父组件来实现间接通信。

state值修改后，一定要使用 setState()，否则 state 数据并不会改变

特别说明：页面的更新（render() 重新渲染），就是通过this.setState()来实现的。但是，调用setState() 不一定会重新渲染，比如生命周期函数。（这里防止面试时会考到）

 

看一个小例子：

<script type="text/babel">
    class Complex extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                msg: 'hello react',
                flag: true
            }
        }
        click() {
            const {flag} = this.state
            this.setState({
                flag: !flag
            })
        }
        render() {
            const {msg, flag} = this.state
            let res = flag ? "Hello react" : "Bye! react"
            return (
                <div>
                    <h2>{msg}</h2>
                    <h3 onClick={this.click}>{res}</h3>
                </div>
            )
        }
    }
    ReactDOM.render(<Complex />, document.getElementById('app'))

这里是想实现点击Hello react 时变成 Bye react.。但当你点击页面上的 "Hello react" 的时候，会报错，

原因在这里：

我们要注意 JSX 中this 的指向，这里就是  this 指向丢失造成的

解决方法有三种：

第一种：

说明：在 JavaScript中， 类方法默认是没有绑定 的。直接调用该函数时，this 是 undefined

第二种：

第三种：