关于组件--React
组件按照页面结构可以分成,头部、底部、内容部分。这样就可以写三个组件。
组件内部还可以包含下一级组件,
比如头部,可以包含登录,注册等组件。
底部 可以 包含一些链接等。
内容部分可以包含表单组件、按钮组件等一些功能组件。
组件的好处很多,
有利于细化UI逻辑,不同组件控制不同的功能点。
有利于代码复用,不同页面使用相同的组件。
有利于人员分工,不同工程师负责不同的组件。
React 的核心概念就是组件。
JSX语法特点就是 凡是使用JavaScript的值的地方,都可以使用类似的HTML的语法。
有两个注意点:1、标签必须是闭合的。2、顶层只能有一个标签,即只有一个根元素。
JSX语法允许JavaScript和HTML混写。
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
虽然输出 JSX 代码的函数就是一个 React 组件,但是这种写法只适合那些最简单的组件。更正式、更通用的组件写法,要使用 ES6 类(class)的语法。
import React from 'react' class ShoppingList extends React.Component {
render() {
return (
<div>
<h1>shopping list for {this.props.name} </h1>
<ul>
<li>跑鞋</li>
<li>压缩裤</li>
<li>滑板</li>
</ul>
<div>this.props.children: {this.props.children}</div>
</div>
)
}
} export default ShoppingList;
组件内部,所有参数都放在this.props这个属性上面。
this.props
对象有一个非常特殊的参数this.props.children
,表示当前组件“包裹”的所有内容。
React 规定,组件的内部状态记录在this.state
这个对象上面。
生命周期
组件运行过程中存在不同阶段,React 为这些阶段提供了钩子方法,允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法(lifecycle methods)。
其中componentDidMount()
、componentWillUnmount()
和componentDidUpdate()
就是三个最常用的生命周期方法。其中,componentDidMount()
会在组件挂载后自动调用,componentWillUnmount()
会在组件卸载前自动调用,componentDidUpdate()
会在 UI 每次更新后调用(即组件挂载成功以后,每次调用 render 方法,都会触发这个方法)。
还有3个不常用的:
shouldComponentUpdate(nextProps, nextState)
:每当this.props
或this.state
有变化,在render
方法执行之前,就会调用这个方法。该方法返回一个布尔值,表示是否应该继续执行render
方法,即如果返回false
,UI 就不会更新,默认返回true
。组件挂载时,render
方法的第一次执行,不会调用这个方法。static getDerivedStateFromProps(props, state)
:该方法在render
方法执行之前调用,包括组件的第一次记载。它应该返回一个新的 state 对象,通常用在组件状态依赖外部输入的参数的情况。getSnapshotBeforeUpdate()
:该方法在每次 DOM 更新之前调用,用来收集 DOM 信息。它返回的值,将作为参数传入componentDidUpdate()
方法。
受控与非受控组件
非受控组件:
import React from 'react' const MyInput = ({onChange}) => (
<input onChange={onChange} />
)
class Demo extends React.Component {
onTextChange = (event) => {
console.log(event.target.value);
}
onTextReset = () => {
// 这里该怎么做?
// 拿到 input 的值,然后 = '' ?
}
render() {
return (
<div>
<MyInput onChange={this.onTextChange} />
<button onClick={this.onTextReset}>Reset</button>
</div> )
}
} export default Demo;
看起来,要修改MyInput中的值并不容易,对于这种不能直接控制状态的组件,我们称之为“非受控组件”。
受控组件:
将上面代码进行修改
import React from 'react' const MyInput = ({value = '', onChange}) => (
<input value={value} onChange={onChange} />
)
class Demo extends React.Component {
state = {
text: '',
}
onTextChange = (event) => {
console.log(event.target.value);
this.setState({text: event.target.value})
}
onTextReset = () => {
// 这里该怎么做?
// 拿到 input 的值,然后 = '' ?
this.setState({text: ''})
}
render() {
return (
<div>
<MyInput value={this.state.text} onChange={this.onTextChange} />
<button onClick={this.onTextReset}>Reset</button>
</div> )
}
} export default Demo;
这样 MyInput 的输入就完全由value值决定。
“受控”与“非受控”两个概念,区别在于这个组件的状态是否可以被外部修改。一个设计得当的组件应该同时支持“受控”与“非受控”两种形式,即当开发者不控制组件属性时,组件自己管理状态,而当开发者控制组件属性时,组件该由属性控制。而开发一个复杂组件更需要注意这点,以避免只有部分属性受控,使其变成一个半受控组件。
关于组件--React的更多相关文章
- React 克隆组件 -- React.cloneElement(可以用来修改子组件属性值,复制子组件,添加子组件)
项目要求实现按钮级权限,简单来说就是需要通过后台数据绑定来控制前端页面哪些操作按钮需要渲染,哪些操作按钮不需要渲染, 大体的方案是: 在原有的按钮标签外再套一层按钮权限控制标签,然后每个具体的按钮对照 ...
- 野心勃勃的React组件生命周期
当你还在写着Angular指令,过滤器,注入,服务,提供者,视图模版的时候,是不是觉得很烦,好在这个时候,React已经神一样的出现在历史舞台. React组件 React实现了UI=Fn(St ...
- React入门--------组件的生命周期
Mounting/组件挂载相关: componentWillMount componentDidMount Updating/组件更新相关: componentWillReceiveProps sho ...
- [react 基础篇]——React.createClass()方法同时创建多个组件类
react 组件 React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 方法就用于生成一个组件类 一个组 ...
- 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件
React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...
- react创建组件的几种方式及其区别
react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件 ③.es6形式的extends React.Component定义的组 ...
- React 的组件与 this.props对象
1.组件 React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 的方法就是用于生成一个组件类. 2.this.props对象 ...
- 强大的拖拽组件:React DnD 的使用
强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读 · 读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...
- React创建组件的三种方式及其区别
内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...
随机推荐
- [转帖]CHROME开发者工具的小技巧
CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论 64,08 ...
- centos7.x下环境搭建(五)—nginx搭建https服务
https证书获取 十大免费SSL证书 https://blog.csdn.net/ithomer/article/details/78075006 如果我们用的是阿里云或腾讯云,他们都提供了免费版的 ...
- K8s 学习者绝对不能错过的最全知识图谱(内含 58个知识点链接)
作者 | 平名 阿里服务端开发技术专家 导读:Kubernetes 作为云原生时代的“操作系统”,熟悉和使用它是每名用户的必备技能.本篇文章概述了容器服务 Kubernetes 的知识图谱,部分内容参 ...
- 新的部署架构之下,如何拿shell?
和朋友聊起一个话题,服务器部署架构升级对安全的影响.从最简单的一台服务器,到应用.数据库.文件服务器分离:从本地机房服务器到云服务器产品矩阵:从虚拟化到容器化部署,一直在往更安全的方向改变. 本文试图 ...
- 【linux】linux修改文件句柄数量,linux文件句柄的修改分为用户级和系统级
说明: liunx中文件句柄有两种,一种是用户级的,一种是系统级的 文件句柄限制,就是规定的单个进程能够打开的最大文件句柄数量(Socket连接也算在里面,默认大小1024) 1 用户级的修改 1.1 ...
- Exceptionless - 本地搭建
搭建环境:Windows 10 参与文档:https://github.com/exceptionless/Exceptionless/wiki/Self-Hosting 运行环境: .NET 4.6 ...
- [世预赛] 中国vs关岛,关岛实力有限 国足或许可以赢其10个球,比分预测 10:0,8:0,13:0
[世预赛] 中国vs关岛 开赛时间:2019-10-10 20:00 继5比0大胜马尔代夫之后,国足迎来世预赛40强赛的第二场比赛,再次向世界杯发起冲击.10月10日,国足在广州迎战神秘之旅关岛. 1 ...
- Spring事务源码解析(二)获取增强
在上一篇文章@EnableTransactionManagement注解解析中,我们搭建了源码阅读的环境,以及解析了开启Spring事务功能的注解@EnableTransactionManagemen ...
- em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
- HandBrake-QuickSync-Mac (内容:QuickSync encoder via VideoToolbox )
来源:https://github.com/galad87/HandBrake-QuickSync-Mac/commit/2c1332958f7095c640cbcbcb45ffc955739d594 ...