react是R系技术栈中最基础同时也是最核心的一环,2年不到获取 了62.5k star(截止到目前),足可见其给力程度。下面对一些react日常开发中的注意事项进行罗列。
React的组件生命周期
react主要思想是构建可复用组件来构建用户 界面。在react里面一切皆组件。每个组件里面都是有自己的生命周期,这个生命周期规定了组件的状态和方法 ,分别在哪个阶段执行。下面附上一张React的生命周期图:
组件第一阶段:初始化、渲染以及装载完成;
组件第二阶段:组件运行时候的状态 ①:状态变化引发组件的更新和重新渲染到更新完成
②:父组件属性 变化引发组件的更新(是常见的组件之间传递数据和同步状态的手段):比如父组件登录 了,子组件也需变成登录 状态
组件第三阶段:卸载组件
JSX 语法
rush:js;">
const names = ['Alice','Emily','Kate'];
ReactDOM.render(
{
names.map((name) => {
return
Hello,{name}!
})
}
,document.getElementById('example')
);
JSX 的基本语法规则:遇到 HTML 标签 (以<
开头),就用 HTML 规则解析;遇到代码 块(以{
开头),就用 JavaScript 规则解析。
所以给jsx添加 注释只要这样子:
{/* 。。。 */}
父组件传向子组件
rush:js;">
子:
var HelloMessage = React.createClass({
render: function() {
return
Hello {this.props.name} ;
}
});
---------------------------------------
父:
ReactDOM.render(
,document.getElementById('example')
);
变量HelloMessage
就是相当于一个 子组件类。通过this.props.name获取 到了Muyy。
另外注意
所有组件类都必须有自己的render
方法 ,用于输出 组件。
组件类的第一个 字母必须大写,否则会报错,比如HelloMessage
不能写成helloMessage
组件类只能包含一个 顶层标签
class
属性 需要写成className
,for
属性 需要写成htmlFor
,这是因为class
和for
是 JavaScript 的保留字
子组件传向父(爷)组件
其实很简单,概括起来就是:react中state改变了,组件才会update。父组件写好state和处理该state的函数 ,同时将函数 名通过props属性 值的形式传入子,子调用 父的函数 ,同时引起state变化。
例子1.这里如下图,用户 邮箱为父,绿色框为子。 父组件为用户 输入的邮箱设好state,即“{email: ''}”,同时写好处理state的函数 ,即“handleEmail”,这两个名称 随意起;再将函数 以props的形式传到子组件,子组件只需在事件发生时,调用 父组件传过来的函数 即可。
rush:js;">
//子组件
var Child = React.createClass({
render: function(){
return (
请输入邮箱:
)
}
});
//父组件,此处通过event.target.value
获取 子组件的值
var Parent = React.createClass({
ge
tini tialState: function(){
return {
email: ''
}
},handleEmail: function(event){
this.setState({email: event.target.value});
},render: function(){
return (
)
}
});
React.render(
,document.getElementById('test')
);
例子2.有时候往往需要对数据做处理,再传给父组件,比如过滤或者自动 补全等等,下面的例子对用户 输入的邮箱做简单验证,自动 过滤非数字、字母和"@."以外的字符。
rush:js;">
//子组件,handleVal
函数 处理
用户 输入的字符,再传给父组件的handelEmail
函数
var Child = React.createClass({
handleVal: function() {
var val = this.refs.emailDom.value;
val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
this.props.handleEmail(val);
},render: function(){
return (
请输入邮箱:
)
}
});
//父组件,通过handleEmail接受到的参数,即子组件的值
var Parent = React.createClass({
ge
tini tialState: function(){
return {
email: ''
}
},handleEmail: function(val){
this.setState({email: val});
},document.getElementById('test')
);
例子3.如果还存在孙子组件的情况呢?如下图,黑框为父,绿框为子,红框为孙,要求子孙的数据都传给爷爷。原理一样的,只是父要将爷爷对孙子的处理函数 直接传下去。
rush:js;">
//孙子,将下拉选项的值传给爷爷
var Grandson = React.createClass({
render: function(){
return (
性别:
)
}
});
//子,将
用户 输入的姓名传给爹
//对于孙子的处理
函数 ,父只需用props传下去即可
var Child = React.createClass({
render: function(){
return (
姓名:
)
}
});
//父组件,准备了两个state,username和sex用来接收子孙传过来的值,对应两个
函数 handleVal和handleSelect
var Parent = React.createClass({
ge
tini tialState: function(){
return {
username: '',sex: ''
}
},handleVal: function(event){
this.setState({username: event.target.value});
},handleSelect: function(event) {
this.setState({sex: event.target.value});
},render: function(){
return (
用户 姓名:{this.state.username}
)
}
});
React.render(
,document.getElementById('test')
);
getDefaultProps && getini tialState
getDefaultProps
方法 可以用来设置组件属性 的默 认值
rush:js;">
var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
},render: function() {
return
{this.props.title} ;
}
});
ReactDOM.render(
,document.body
);
getini tialState 方法 可以用来设置初始状态
rush:js;">
ge
tini tialState: function() {
return {liked: false};
},
获取 真实的DOM节点
从组件获取 真实 DOM 的节点,这时就要用到ref
属性
上面代码 中,组件MyComponent
的子节点有一个 文本输入框,用于获取 用户 的输入。这时就必须获取 真实的 DOM 节点,虚拟 DOM 是拿不到用户 输入的。为了做到这一点,文本输入框必须有一个 ref
属性 ,然后this.refs.[refName]
就会返回这个真实的 DOM 节点。
需要注意的是,由于this.refs.[refName]
属性 获取 的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性 ,否则会报错。上面代码 中,通过为组件指定Click
事件的回调函数 ,确保了只有等到真实 DOM 发生Click
事件之后,才会读取this.refs.[refName]
属性 。
React 组件支持 很多事件,除了Click
事件以外,还有KeyDown
、cop y
、Scroll
等,完整的事件清单请查看官方文档 。
子组件传向父组件的另一种思路
父组件调用 子组件的state、function,除了上面介绍的方法 之外,也可以通过ref属性 实现。推荐使用这种方式进行子组件向父组件的传递。举个简单的示范:
rush:js;">
export default class 父组件a extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<子组件b
ref={r => this.bbbb =r} // bbbb自定义 名字
/>
)
}
}
经过这样处理后后,现在父组件a中可以通过this.bbbb.state.xxx获取 子组件的xxx状态,也可以通过this.bbbb.xxx获取 子组件的xxx方法 。
以上就是本文的全部内容 ,希望对大家的学习有所帮助,也希望大家多多支持 编程之家。