React技术栈-组件的基本定义和使用
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.模块与组件的理解
1>.什么是模块
理解:
向外提供特定功能的js程序, 一般就是一个js文件.
为什么:
js代码更多更复杂.
作用:
复用js, 简化js的编写, 提高js运行效率.
2>.什么是组件
理解:
用来实现特定(局部)功能效果的代码集合(html/css/js)
为什么:
一个界面的功能更复杂
作用:
复用编码, 简化项目编码, 提高运行效率
3>.什么是模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
4>.组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
二.react组件的基本定义和使用案例实战
1>.HTML源代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>react组件的基本定义和使用</title> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> <script type="text/javascript" src="../js/react.development.js"></script> <script type="text/javascript" src="../js/react-dom.development.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /** * 1>.定义组件时需要注意的事项: * 组件名称首字母大写; * 虚拟DOM元素只能有一个根元素; * 虚拟DOM元素必须有结束标签; */ //定义组件方式一:工厂函数组件(简单组件，即没有涉及到状态变化的组件) function MyComponent() { return <h1>工厂函数组件(简单组件)</h1> } //定义组件方式二:ES6类组件(复杂组件,一旦涉及到状态变化就必须使用类组件，因为函数组件不能保存状态。函数调用完成后就得弹栈，这意味函数生命周期结束啦，但理论上来说函数的效率要高，因为使用类得进行实例化) class MyComponent2 extends React.Component { render() { return <h3>ES6类组件(复杂组件)</h3> } } /** * 2>.渲染组件标签,render()渲染组件标签的基本流程如下: * React内部会创建组件实例对象; * 得到包含的虚拟DOM并解析位真实DOM; * 插入到指定的页面元素内部; */ ReactDOM.render(<MyComponent />,document.getElementById("box1")); ReactDOM.render(<MyComponent2 />,document.getElementById("box2")); </script> </html>
2>.浏览器打开以上代码渲染结果
