码迷,mamicode.com
首页 > Web开发 > 详细

原创教程之——reactjs 组件入门教程

时间:2018-04-03 14:26:05      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:let   组合   nav   原创   集合   开发   tps   函数   它的   

在学习react之前,希望你有以下准备:

react的安装
ECMAScript 6基础

本文不讲解react的安装步骤,若需了解请移步官方网站(https://reactjs.org/),那里讲解非常清楚,也很简单。
至于ECMAScript 6,大家可以去阮一峰老师的官网(http://www.ruanyifeng.com)学习。

这篇文章主要解决一下几个要点, 这几个要点也可能是大家在学习react时非常迷惑的地方。

要点一:
什么是组件?

要点二:
如何编写组件?

要点三:
组件之间如何组合使用?

在弄清这些要点之前,我们先来看,react安装后的目录是怎样的,应该在哪个目录下进行开发。

看截图:

技术分享图片
可以说这个就是react的标准目录结构,打开src目录:

看截图:

 

技术分享图片

这个目录下就是你将要开发组件的地方。

 

弄清了react的目录结构,我们正式来讲解要点。

什么是组件?

请记住:文件即组件

比如在src目录下的App.js,这个App.js就是组件。你也可以自己建立一个组件,如Nav.js等等。

这个就是react的核心思想。一个网站的构成可以看成是很多组件的集合。

比如一个网站的首页分为头部,主内容区域,底部。那么这三个大区域就可以当作组件。然后每个区域里的内容块又可以当作组件,以此类推,可以划分成更小的组件。我们可以来看一张图:

技术分享图片

说形象点组件就像定义的很多功能函数,通过配置参数,组合调用这些函数,最后就可以实现一个完整的网站。
组件的好处就是能重复使用,既能减少开发量,也能让代码干净整洁,逻辑清晰,方便阅读。

组件如此的美好,那该怎么来编写呢?

第二个问题,如何编写组件。
在编写组件之前,我自己通常把组件分成两种,非UI组件和UI组件。

看例子:

//App.js

import React, { Component } from ‘react‘;
import ‘./App.css‘;

class App extends Component {

render() {

return (
    <div className="App">
      <header className="App-header">
       <h1 className="App-title">Welcome to React</h1>
      </header>
     </div>
);
}
}

export default App;

这是一个UI组件。是一个非常简单的组件。即便不了解es6的同学,也能秒懂。
由此,我们可以把UI的组件书写结构标准化,如下:

//MyApp.js

import React, { Component } from ‘react‘;

class MyApp extends Component {
    //其它的功能代码
    render() {
        return (
        //UI代码
        );
    }
}

export default MyApp;

依次类推,我们也可以把非UI的组件书写结构标准化,如下:

//Myfn.js

let Myfn = {
    http(params){
    //代码
    }
    showMessage(msg){
    //代码
    }
    ...
    //其它代码
}

export default Myfn;

对比一下,发现两者有以下不同:

UI组件需要class语句
UI组件需要render函数
反之则不需要。

相同点:
react规定,组件名(也就是文件名)首字母必须大写。
为了便于代码管理和阅读,最好让组件名和组件内部导出的绑定名字统一。以Myfn.js为例,Myfn.js的文件名和其导出的Myfn对象名是一致的。大家一定要养成这样的书写习惯。


组件写法我们会了,那如何让组件组合使用呢?
以上面的例子说明,如果我想在MyApp.js里使用Myfn,可以这样使用:

//MyApp.js

import React, { Component } from ‘react‘;
import Myfn from ‘./Myfn‘; //注意这句,此处的Myfn.js的扩展名可以省去

class MyApp extends Component {
    //其它的功能代码
    showMsg(msg){
        Myfn.showMessage(msg); //注意这句
    }
    render() {
        //this.showMsg(‘hello world!‘)或
        //Myfn.showMessage(‘hello world!‘)
        return (
            //UI代码
        );
    }
}

export default MyApp;

是不是很简单?
记住一句话:非UI组件通常是导入到UI组件里使用的,非UI组件通常为UI组件渲染时提供逻辑处理。

原创教程之——reactjs 组件入门教程

标签:let   组合   nav   原创   集合   开发   tps   函数   它的   

原文地址:https://www.cnblogs.com/tinkbell/p/8707854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!