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>
    )
  }
}

来源：CSDN

作者：方格田

链接：https://blog.csdn.net/qq_43393963/article/details/104172578

标签

react

React框架（二）React组件

React组件化的思想

组件定义