三大主流框架:React、Vue、Angular之React的学习笔记及总结:进阶篇

三大主流框架:React、Vue、Angular之React的学习笔记及总结:进阶篇

Recat组件的介绍:

1.组件是React的一等公民,使用React就是在使用组件。
2.组件表示页面中的部分功能。
3.组合多个组件实现完整的页面功能。
4.特点:可复用、独立、可组合。

React组件的创建:

方法一:使用函数创建组件。

函数组件:使用JS的函数(或者函数箭头)创建的组件。
约定一:函数名称必须以大写字母开头。区分组件和普通React元素。
约定二:函数组件必须有返回值,表示该组件的结构。 如果返回null,则表示不渲染任何内容。

  • 渲染函数组件:用函数名作为组件标签名。
  • 组件标签可以是单标签也可以是双标签。
//JS函数:
import React from 'react';
import ReactDOM from 'react-dom';

function Hello(){
  return (
    <div>
        这是我的第一个组件
    </div>
  )
}

ReactDOM.render(<Hello/>, document.getElementById('root'))

//箭头函数:
import React from 'react';
import ReactDOM from 'react-dom';

const Hello = () => <div>这是我的第一个函数组件</div>

ReactDOM.render(<Hello/>, document.getElementById('root'))

方法二:使用类创建组件。

类组件:使用ES6的class创建的组件。
约定一:类名也必须以大写字母开头。区分组件和普通React元素。
约定二:类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性。
约定三:类组件必须提供render()方法。
约定四:render()方法必须有返回值,表示该组件的结构。 如果返回null,则表示不渲染任何内容。

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component{
  render(){
    return (
      <div>
        这是我的第一个类组件。
      </div>
    )
  }
}

ReactDOM.render(<Hello/>, document.getElementById('root'))

思考:项目中组件过多之后,应该如何组织这些文件呢?--------将组件放到一个单独的JS文件中。
抽离组件为独立的JS文件:

抽离步骤:
1.创建Hello.js。
2.在Hello.js中导入React。
3.创建组件(函数或者类)。
4.在Hello.js中导出组件。
5.在index.js中导入Hello组件。
6.渲染组件。

//Hello.js
import React from 'react';

class Hello extends React.Component{
    render(){
        return (
            <div>这是我的第一个组件。</div>
        )
    }
}

export default Hello //导出组件
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';//导入组件

ReactDOM.render(<Hello />, document.getElementById('root'));//渲染组件

React的事件绑定:

React事件绑定语法与DOM事件语法相似。
语法:on+事件名称={事件处理程序},比如:onClick = {( ) => { }}。
React事件采用驼峰命名法

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值