React组件化的思想
- 将项目中的页面按照功能(或者是位置等等)划分为一个个块儿。
- 如果有的块儿是每个页面或者大多数页面共有的部分,比如导航栏、菜单栏、翻页模块之类的,就写在公共组件里面,然后再需要的页面进行渲染。如果是某个页面特有的模块,就给每一个页面单独写一个文件,里面定义该模块的组件并于公共组件结合进行渲染。
- 某个页面内若是有新的弹窗,则在父页面下建立新的文件进行组件的定义,避免一个文件过大。
原文链接:https://blog.csdn.net/qq_28304961/article/details/95313525
组件定义
在React框架------开发环境准备、构建第一个React项目文章中,创建了第一个React项目,其中的App.js文件代码(删除不必要的代码,简化后)如下:
import React from 'react';
function App() {
/*
jsx的语法(在js文件中使用html的标签),也要import React from 'react'才能编译成功。一般的js语法中,
要返回标签,需要使用return '<div>hello</div>',而在react中运行不起来,这时需要直接使用return <div>hello</div>
*/
return (
<div className="App">hello world
</div>
);
}
export default App; //该语法导出App
也可以用下面这种写法来定义组件:
==> 写法一:
import React from 'react';
import { Component } from 'react' //结构赋值,等价于const Component = React.Component
//定义一个类app,使该类继承Component,那么这个类就成为一个react组件
class app extends Component{
render() { // 返回什么,该组件就显示什么,render()函数决定了组件显示
return (
<div>hello</div>
)
}
}
//==========================================================
==> 写法二:
import React from 'react';
//定义一个类app,使该类继承React.Component,那么这个类就成为一个react组件
class app extends React.Component{
render() {
return (
<div>hello</div>
)
}
}