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