react学习笔记_03-组件&props
组件 & Props的学习
组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
1.函数组件与 class 组件
1).定义组件最简单的方式就是编写 JavaScript 函数：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
这段代码就可以称之为函数组件，首先接收了props(代表属性)参数，其次返回react元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
2).class组件（使用 ES6 的 class）需要继承React.Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
注：class组件需要在类中的render()方法内返回react元素。上述两个组件在 React 里是等效的。
2.渲染组件
React 元素不仅可以使用dom标签也可以是用户自定义的组件：
dom标签
const element = <div />;
自定义标签
const element = <Welcome name="Sara" />;
当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 “props”。
这段代码会在页面上渲染 “Hello, Sara”：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
注意： 组件名称必须以大写字母开头。
React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。
我们可以重新使用函数组件和class组件进行重构计时器：
函数组件重构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数组件计时器</title>
</head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel"> function Time(props){
return (
<div>
<h1>当前时间是：{props.date.toLocaleTimeString()}</h1>
</div>
);
}
function tick(){
ReactDOM.render(
<Time date={new Date()}/>,
document.getElementById('root')
)
} setInterval(tick,1000); </script>
<body>
<div id="root"></div>
</body>
</html>
class组件计时器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数组件计时器</title>
</head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
class Time extends React.Component {
render(){
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
/*function Time(props){
return (
<div>
<h1>当前时间是：{props.date.toLocaleTimeString()}</h1>
</div>
);
}*/
function tick(){
ReactDOM.render(
<Time date={new Date()}/>,
document.getElementById('root')
)
} setInterval(tick,1000); </script>
<body>
<div id="root"></div>
</body>
</html>
3.组合组件
组件可以在其输出中引用其他组件。这就可以让我们用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。
我们可以创建一个可以多次渲染 Func组件的 App 组件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react组合组件</title>
</head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel"> function Func(props) {
return <h1>hello，{props.name}</h1>; } class App extends React.Component {
render(){
return (
<div>
<Func name="Lisu" />
<Func name="Lisu" />
<Func name="Lisu" />
</div>
);
}
} const element = <App />;
ReactDOM.render(
element,
document.getElementById('root')
); </script>
<body>
<div id="root"></div>
</body>
</html>
4.提取组件
将组件拆分为更小的组件。
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
该组件用于描述一个社交媒体网站上的评论功能，它接收 author（对象），text （字符串）以及 date（日期）作为 props。
该组件由于嵌套的关系，变得难以维护，且很难复用它的各个部分。因此，让我们从中提取一些组件出来。
1).首先提取Avatar(头像)部分：
function Avatar(props) {
return (
<Avatar className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
2).替换Comment中的头像部分
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
3).抽取UserInfo组件
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}
4）.替换UserInfo
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
5.Props 的只读性
组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
function sum(a, b) {
return a + b;
}
这样的函数被称为“纯函数”，因为该函数不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果。
function withdraw(account, amount) {
account.total -= amount;
}
这个函数则不是纯函数，因为它更改了自己的入参
React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。
react学习笔记_03-组件&props的更多相关文章
- 【React】react学习笔记03-React组件对象的三大属性-state
今天晚上学习了React中state的使用,特做此记录,对于学习的方式,博主仍然推荐直接复制完整代码,对着注释观察现象!: 上文中,我列举了两种React自定义组件的声明,这里我拿方式二进行举例: / ...
- React学习笔记(三) 组件传值
组件嵌套后,父组件怎么向子组件发送数据呢? 答案是: this.props <script type="text/babel"> var MyFirst = React ...
- React学习笔记(二) 组件状态
组件的状态(this.state): 组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI getIni ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- 【React】react学习笔记02-面向组件编程
react学习笔记02-面向组件编程 面向组件编程,直白来说,就是定义组件,使用组件. 以下内容则简单介绍下组建的声明与使用,直接复制demo观测结果即可. 步骤: 1.定义组件 a.轻量组件-函 ...
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记（一）- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记（六）事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
随机推荐
- ivew url 的输入
1. <FormItem label="链接" prop="url"> <Input v-model="formValidate.u ...
- CF 49E Common ancestor
传送门 模拟赛T1就自闭了( 才不会说我是去刚T2了来着 感觉非常暴力的一个题? 出题人良心开大数据范围 n=100 还是原来的n^4*26算法我也是自闭了 不过貌似跑不到n^4? 真·大力出奇迹 一 ...
- ForkJoinPool线程池--分支执行
import java.util.ArrayList; import java.util.concurrent.ExecutionException; import java.util.concurr ...
- python基础知识1
1.何为json? json 是一种轻量级的数据交换格式,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机 ...
- JS中Object的一些关于原型的方法
1.Object.getPrototypeOf(obj) 该方法返回 obj 对象的原型对象,等同于 obj.__proto__.获取对象的原型对象推荐使用该方法而不是 obj.__proto__方法 ...
- JS谷歌浏览器断点调试
1.找到对应的文件 按F12打开网页调试工具,默认打开的是Elements,显示的是网页标签元素.选择Source,在左侧找到对应的js代码文件(这里是在page标签上找到的) 1.1.如何找到web ...
- 用闭包解决 js 循环中函数变量暂存问题
需求:有一个数组,根据数组的值渲染对应的数字div,单击对应的div 在控制台打印对应的数字.如点击1,控制台打印1. 问题: 不管点击哪个值 打出来都是4 代码如下 <!DOCTYPE htm ...
- StatefulWidget 有状态组件
在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget: StatelessWidget 是无状态组件,状态不可变的 widget ...
- 转载：IDEA配置SVN及使用
转自:https://blog.csdn.net/zwj1030711290/article/details/80687365 1.安装svn客户端 之前用myEcplise只需要插件,现在IDEA需 ...
- Java程序执行的过程
ava程序执行的过程: Step1:将字节码加入内存: Step2:对字节码进行合法性检查: Step3:jvm会为每个字节码文件都生成一个对象(class): Step4:执行静态代码块,初始化静态 ...