React 组件(函数类组件)
Posted YuLong~W
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 组件(函数类组件)相关的知识,希望对你有一定的参考价值。
组件与模块概念
模块:
理解:向外提供特定功能的 js程序, 一般就是一个 js文件
为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂
作用:复用 js, 简化 js的编写, 提高 js运行效率
组件:
理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件: 一个界面的功能更复杂
作用:复用编码, 简化项目编码, 提高运行效率
模块化: 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件化: 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
React :元素构成组件(复杂的组件由多个组件构成),组件又构成应用。
React核心思想是组件化,其中组件通过 属性(props) 和 状态(state) 传递数据。
React 组件介绍
React组件可以将UI切分成一些独立的、可复用的部件, 这样有助于设计人员专注于构建每一个单独的部件。尽管React组件与JSX代码实现的功能基本一致,但从设计角度上讲还是推荐使用React组件方式。原因是:将React组件和Props结合使用可以实现更灵活的功能
- React通过组件的思想,将界面拆分成一个个可复用的模块,每一个模块就是一个React 组件。一个React应用由若干组件组合而成,一个复杂组件也可以由若干简单组件组合而成。
- React 组件可以用好几种方式声明,可以是一个包含 render()方法的类,也可以是一个简单的函数,不管怎么样,它都是以props作为输入,返回 React 元素作为输出。
- React语法是基于版本ECMAScript6实现的。因此,React组件除了通过javascript函数形式实现,还可以通过ES6 Class(类)的形式来实现。
函数组件
JavaScript 函数构建的组件一定是无状态组件。它能传入props和context两个参数,没有state,除了render(),没有其它生命周期方法。但正是这样,函数组件才更加专注和单一,它只是一个返回React 元素的函数,只关注对应UI的展现。函数组件接收外部传入的props,返回对应UI的DOM描述。
const reactDiv=document.getElementById('react-div');
//定义一个函数(组件) 函数名首字母必须大写
function HelloReact(){
console.log(this); //此处的this是undefined,因为babel编译后开启了严格模式
return <div>
<h2>React组件:</h2>
<p>我是函数组件</p>
</div>
}
//DOM的渲染
ReactDOM.render(<HelloReact/>,reactDiv);
ReactDOM.render()作用:
- React解析组件标签,找到了HelloReact组件。
- 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
类组件
相比于函数式组件功能更强大。它有state,以及不同的生命周期方法,可以让开发者能够在组件的不同阶段(挂载、更新、卸载),对组件做更多的控制。类组件可能是无状态组件,也可能是有状态组件
//定义类:必须是React.Componet类的子类,类名的首字母必须大写
class HelloReact extends React.Component{
render() {
return <div>
<label>姓名:
<input type="text" />
</label>
</div>
}
//1、render是放在哪里的?—— HelloReact的原型对象上,供实例使用。
//2、render中的this是谁?—— HelloReact的实例对象 <=> HelloReact组件实例对象。
}
//组件渲染
ReactDOM.render(<HelloReact/>,document.getElementById('react-div'));
ReactDOM.render()作用:
- React解析组件标签,找到了HelloReact组件。
- 发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
- 将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
强调:
- 组件名(函数名)的首字母必须大写
- 虚拟的DOM只能有一个根元素
- 虚拟的DOM必须有结束标签
<br/>
、<input type='text' />
二者区别
函数组件:
- 使用 js函数 创建组件
- 函数名称必须以大写字母开头( React 据此区分 组件 和 普通的React 元素)
- 函数组件必须有返回值,表示该组件的结构
- 若返回值为null,表示不渲染任何内容
- 渲染函数组件:用函数名作为组件标签名,组件标签可以是单标签也可以是双标签
类组件:
- 使用 ES6的class 创建的组件
- 类名称必须以大写字母开头
- 类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性
- 类组件必须提供render()方法
- render()方法必须有返回值,表示该组件的结构
组件的实例
React 组件是一个函数或类,实际工作时,发挥作用的是React 组件的实例对象。只有组件实例化后,每一个组件实例才有了自己的props和state,才持有对它的DOM节点和子组件实例的引用。
在传统的面向对象的开发方式中,实例化的工作是由开发者自己手动完成的,但在React中,组件的实例化工作是由React自动完成的,组件实例也是直接由React管理的。换句话说,开发者完全不必关心组件实例的创建、更新和销毁。
在类组件中的实例,就是用 this 引用的那个对象,对于保存本地状态以及介入生命周期函数是有用的。
以上是关于React 组件(函数类组件)的主要内容,如果未能解决你的问题,请参考以下文章