三大主流框架：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事件采用驼峰命名法