React 创建组件的两种方式
2022年9月25日- 函数组件又叫无状态组件 函数组件是不能自己提供数据[基于hooks之前的说]
- 类组件又叫又状态组件类组件可以自己提供数据,组件内部的状态(数据如果发生了改变,内容会自动的更新)数据驱动视图
- 状态(state)即组件的私有数据,当组件的状态发生了改变,页面的结构也就发生了改变
- 函数组件是没有状态的,只负责页面的展示(静态)性能比较高
- 类组件有自己的状态,负责更新UI,只要类组件的数据发生了改变,UI就会更新
- 在复杂的项目中一遍都是由函数组件和类组件配合来完成的.[增加了使用负担,所以后来有了hooks]
函数组件
使用函数创建组件
|
1 2 3 4 5 6 |
function Hello () { return ( <div>这是我的函数组件</div> ) } |
使用箭头函数创建组件
|
1 |
const Hello = () => <div>这是一个函数组件</div> |
使用组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function Hello() { return (<div>你好世界</div>) } let e = ( <div> {/*通过标签的方法使用*/} <Hello></Hello> {/*通过方法的方式使用*/} <div>{Hello()}</div> </div> ) //使用ReactDom 直接渲染 ReactDOM.render(<Hello/>, document.getElementById('root')) |
通过类创建组件
index.js
|
1 2 3 4 5 6 |
import ReactDOM from "react-dom" import Hello from "./components/Hello.jsx" let e = (<div><Hello></Hello></div>) ReactDOM.render(e, document.getElementById('root')) |
/components/Hello.jsx"
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import react from 'react' /** * 1。类组件必须是React.Component * 2。必须提供render方法 * 3。render方法必须有返回值 */ class Hello extends react.Component{ render() { return (<div>这个是通过继承类创造组件</div>) } } export default Hello |
