发布于 

React组件

React组件创建:特点:复用 独立 可组合

函数创建:使用JS函数或箭头函数创建的组件

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
const Dnz = () => {

return (
<div>
<h2>函数组件</h2>
<p onClick={fn}>点击</p>
</div>
)
}
ReactDOM.render(<Dnz />, root)

【注意事项:

​ 1.类与函数名称都需以大写字母开头,使用大驼峰命名法

​ 2.函数组件必须有返回值,表示该组件的结构,而类组件则需提供render()方法。

​ 3.函数的组件标签闭合,而类的render()方法须有返回值表示该组件的结构

class创建组件:使用ES6的class关键字创建的组件

类组件应继承React.Component父类,从而可以使用父类中提供的方法和属性。有关继承请访问es5类的创建与继承es6类的创建与继承

1
2
3
4
5
6
7
import React from 'react';
class Hello extends React Component {
render() {
return <div>Hello Class Component!</div>
}
}
ReactDOM.render(<Hello />, root)

组件抽离:将每个组件放到单独的JS文件中。独立体放单独JS文件中

步骤:

​ 1.创建JS文件

​ 2.在JS中导入React核心包

​ 3.创建组件(函数或类)

​ 4.在JS中导出组件

​ 5.在index.js中导入组件

​ 6.渲染组件


扩展:

状态组件与无状态组件

函数组件:无状态组件

类组件class:有状态组件

区别:

  • 类组件有自己的状态,负责更新 UI,让页面“动” 起来 (响应式)
  • 函数组件没有自己的状态,只负责数据展示(静)

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.