react组件化开发

React创建组件有两种方式

1. 通过 JS函数 创建
2. 通过 class 创建

一、函数式组件

注意：

1. 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
2. 函数必须有返回值，返回值可以是：JSX对象或null 
3. 返回的JSX，必须有一个根元素
4. 组件的返回值使用()包裹，避免换行问题

  function Welcome(props) {
            return (
                // 此处注释的写法 
                <div className="shopping-list">
                    {/* 此处 注释的写法 必须要{}包裹 */}
                    <h1>Shopping List for {props.name}</h1>
                    <ul>
                        <li>Instagram</li>
                        <li>WhatsApp</li>
                    </ul>
                </div>
            )
        }

        ReactDOM.render(
            <Welcome name="jack" />,
            document.getElementById('test')
        )

二、类式组件

// 1.创建类式组件
        class Welcome extends React.Component {
            render() {
                // render是放在哪里?MyCom的原型对象上,供实例使用
                // render中的this是谁?MyCom的实例对象
                return (
                    // 此处注释的写法 
                    <div className="shopping-list">
                        {/* 此处 注释的写法 必须要{}包裹 */}
                        <h1>Shopping List for {props.name}</h1>
                        <ul>
                            <li>Instagram</li>
                            <li>WhatsApp</li>
                        </ul>
                    </div>
                )
            }
        }
        // 2.渲染到页面
        ReactDOM.render(<Welcome />, document.getElementById('test'))

注意：

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