数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学理解 React.js 中的组件和属性
React 应用由组件构成。组件通常使用 React 元素。组件可以是独立的、可复用的部分。
组件有两种类型：
- 无状态组件（基本上是 JavaScript 函数）
- 有状态组件（使用 JavaScript 类特性）
两种类型的组件都接收一个属性对象，通常称为 props。
无状态组件在函数中有一个 return 语句，有状态组件有一个 render 方法，该方法返回 React 元素。
在页面上显示的简单 React 元素：
const message=<h1>Hello</h1>; ReactDOM.render( message, document.getElementById(‘root’) );
它在屏幕上显示 Hello 消息。
创建函数组件：
function Message(props){
return (
<h1> {props.message} </h1>
);
}上面的 JavaScript 函数接受一个名为 props 的单个属性对象。props 对象包含消息。
Creating class bases Stateful component:
class Message extends React.component{
render(
return (
<h1>{this.props.message} </h1>
);
)
}以上两个组件的功能相同。基于类的组件具有额外的生命周期特性。
渲染组件
React 元素可以包含简单的 html 标签，例如：
const player =<h2> Steve </h2>;
类似地，React 元素可以包含函数或基于类的组件：
const message=<Message message=”hello”/>;
传递给组件的属性可以作为 props 对象属性访问。props 对象如下所示：
{ message: Hello}组件的名称必须大写，以便 React 区分它与 html 元素或用户定义元素。
组合多个组件
组件可以在其他组件中使用，或者可以嵌套组件。我们可以创建最小的函数组件，或者使用抽象级别是有用的。
props 本质上是只读的，不应该在组件内部修改。
如果组件在任何时候对于相同的输入都返回相同的输出，则称为纯组件。
纯组件示例
function Multiplication(i, j){
return i*j;
}
更新于：2019年8月28日
浏览量：208
广告