关于组件--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组件的方式,殊途同归; 具体的三种方式: ...
随机推荐
- Linux 分区管理器
下面的列表没有特定的排名顺序.大多数分区工具应该存在于 Linux 发行版的仓库中. GParted 这可能是 Linux 发行版中最流行的基于 GUI 的分区管理器.你可能已在某些发行版中预装它.如 ...
- Reimage Isilon cluster,结果忘记了修改管理口的netmask,怎么办?
网页打不开了,正常的SSH也连不上,只能用串口,连接到节点上. 然后使用运行下面的命令来修改netmask: isi network subnets modify groupnet0.subnet0 ...
- 基础知识---const、readonly、static
const:静态常量,也称编译时常量(compile-time constants),属于类型级,通过类名直接访问,被所有对象共享! a.叫编译时常量的原因是它编译时会将其替换为所对应的值: b.静态 ...
- 小程序开发笔记【五】---基于LBS附近动态查询
实现思路 : 获取用户当前位置经纬度坐标 查询动态时将经纬度坐标传给后台 后端通过sql语句计算经纬度坐标之间的距离 // 附近20公里发的动态 按时间排序 let sql = `SELECT * , ...
- Logstash之控制台输出的两种方式
输出json output { stdout { codec => json } } 输出rubydebug output { stdout { codec => rubydebug } ...
- 【Hyper-V】尝试启动选定的虚拟机时出错 32788
错误描述 遇到问题如往常一般搜索了一番(好久没搜索问题了)忽然发现,现在百度文章质量较前几年差太多...怪不得那么多人转搜狗搜索(搜微信文章) PS:有些说是目录权限问题,有些是说虚拟磁盘删了重新加载 ...
- Python中的@函数装饰器到底是什么?
在解释@函数装饰器之前,先说一下,类中的类方法和静态方法. 在Python中完全支持定义类方法.静态方法.这两种方法很相似,Python它们都使用类来调用(ps:用对象调用也可以). 区别在于:Pyt ...
- http头字段
HTTP头字段总结 本节摘自https://www.cnblogs.com/skynet/archive/2010/12/11/1903347.html. 1. Accept:告诉WEB服务器自己接受 ...
- 获取Object对象属性的方法,Reflect.ownKeys, Object.getOwnPropertyNames,Object.getOwnPropertySymbols,Object.keys,for in
let triangle={ a:1, b:2, c:3 } function coloTriangle(){ this.color='red'; } coloTriangle.prototype=t ...
- 关于less的一些入门用法
less 变量(Variables) @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue ...