1.react定义组件的两种方式

1.1 工厂函数组件

function Simple() {
    return <h1>我是函数组件</h1>
}
ReactDom.render(<Simple/>,documnet.getElementById('root'))

1.2 ES6类组件

React16版本之前数据的处理使用ES6类组件，React16后官方提供了Hooks，可以通过函数组件来操作数据了

class Complex extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是复杂的组件'
        }
    }
    render() {
    const {msg} = this.state
        return {
            <div>
               <h1>{msg}</h1>
            </div>
        }
    }
}
ReactDom.render(<Complex/>,documnet.getElementById('root'))

1.3 组件编写注意点

• 一定要有闭合的标签
• 首字母一定要大写
• 只能有一个根节点

1.4 rander渲染组件的基本流程

1. react 内部会创建组件实例对象
2. 得到包含的虚拟dom并解析成真实的dom
3. 插入到指定的页面元素内部

2.React组件的state属性

class Wdnmd extends React.Component {
   state = {
       msg:'666'
   }
   handleClick() {
       //this.state.msg = '999' 
       this.setState({msg:'999'})
   }
    render() {
    const {msg} = this.state
        return {
            <div>
               <h1 onClick={this.handleClick.bind(this)}>{msg}</h1>
            </div>
        }
    }
}
ReactDom.render(<Wdnmd/>,documnet.getElementById('root'))