React面向组件编程（上）

前言：

• React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。通过这三大核心属性的使用，我们能够实现对组件的状态进行更新。

---

一，组件的基本理解和使用

1. 函数组件

 <script type="text/babel">
        function MyComponent() {
     
            return <h2>我是函数定义的组件(适用于简单组件的定义)</h2>
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

函数组件的渲染过程

 1.React解析了组件标签，找到了对应的组件
 2.发现这个组件是一个函数定义的，随后调用该函数，生成一个虚拟dom
 3.最后将虚拟dom转化成为真实dom，呈现在页面中

---

2. 类式组件

<script type="text/babel">
        class MyComponent extends React.Component {
   
            render() {
   
                return <h2>我是类定义的组件适用于复杂数据类型</h2>
            }
        }
        ReactDOM.render(<MyComponent />, document.getElementById('test'))
    </script>

类式组件的渲染过程

1.React解析了组件标签，找到了对应的组件
2.发现这个组件是一个类定义的，随后new出来一个实例对象，并通过该实例调用原型上的render方法
3.将render()返回的内容生成一个虚拟dom
4.最后将虚拟dom转化成为真实dom，呈现在页面中

---

3.组件的注意事项

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

---

二，组件的三大核心属性

1.state

• state 是一个对象，它包含组件的数据状态，当状态变化时，会触发视图的更新。你可以理解它的作用跟 Vue 中的 data 对象类似。

<script type="text/babel">
        class Weather extends React.Component {
   
            constructor() {
   
                super()
                this.state = {
   
                    isHot: false,
                    wind: '微风'
                }
                this.chang = this.chang.bind(this)
            }
            render() {
   
                let {
    isHot, wind } = this.state
                return <h2 onClick={
   this.chang}>今天的天气很 {
   isHot ? "炎热" : "凉爽"},{
   wind}</h2>
            }hang() {
   
                console.log(this)
                this.setState({
   
                    isHot: !this.state.isHot
                })
            }
        }
        ReactDOM.render(<Weather />,