React组件之props和state
在 react 中组件之间的数据传递只有两种 父组件向子组件递数据 和 子组件向父组件传递数据 (但然还有Context，但是不推荐使用)。
父组件向子组件传递数据-props
props 属性，在调用组件的时候，我们可以直接在组件上写属性，在组件中，通过props我们就可以接受到这些属性
let data = {
nav:[
"图片一",
"图片二",
"图片三",
"图片四"
],
img: [
"./img/img1.jpg",
"./img/img2.jpg",
"./img/img3.jpg",
"./img/img4.jpg"
]
};
ReactDOM.render(
<div className="wrap">
<Nav data={data.nav}/>
</div>,
document.getElementById('root'));
class Nav extends React.Component {
render(){
console.log(this.props);
/*
props本身是一个对象:
{
data:["图片一", "图片二", "图片三", "图片四"]
}
*/
return (
<nav></nav>
);
}
}
这里需要注意的问题是子组件中只能通过porps来接受父级传入的数据,在子组件内部是不能修改props的。
props默认参数
通过 defaultProps 可以给组件添加默认参数，具体使用方法如下
class Title extends React.Component {
render(){
return <h1>hello {this.props.name}</h1>;
}
}
Title.defaultProps = {
name: "world"
}
ReactDOM.render(
<div className="wrap">
<Title />
</div>,
document.getElementById('root')
);
props参数类型验证
当我们的程序越来越庞大的时候，传入数据的类型验证就很有必要了。类型验证可以确保我们的程序更稳定，在多人协作的时候也更加安全，也方便我们定位错误
在React中，通常我们会使用 PropTypes 进行类型验证，接下来我们就来看看 PropTypes 该怎么使用
- 安装 PropTypes
npm i prop-types -S - 引入 PropTypes
import PropTypes from "prop-types" - 具体使用如下
class Title extends React.Component {
render(){
return <h1>hello {this.props.name}</h1>;
}
}
Title.propTypes = {
name: PropTypes.string
}
/* 要求name属性的值必须是字符串 */
Title.defaultProps = {
name: "world"
}
ReactDOM.render(
<div className="wrap">
<Title name="React" />
</div>,
document.getElementById('root')
);
- PropTypes 相关验证
PropTypes.array 数组
PropTypes.bool 布尔值
PropTypes.func 函数
PropTypes.number 数字
PropTypes.object 对象
PropTypes.string 字符串
PropTypes.symbol symbol类型
PropTypes.node 可以是 数字，字符串，元素或数组
PropTypes.element React 节点
PropTypes.instanceOf(Message) 判断是否是一个对象的实例
PropTypes.oneOf(['News', 'Photos']) 限定 值只能是 'News' 或 'Photos'
PropTypes.oneOfType([ PropTypes.string, PropTypes.number]) 满足其中一个类型即可
PropTypes.arrayOf(PropTypes.number) 一个规定类型的数组
PropTypes.objectOf(PropTypes.number) 一个规定了属性值类型的对象
PropTypes.shape({color: PropTypes.string, fontSize: PropTypes.number}) 一个要求类型的对象
PropTypes.func.isRequired 一个必传函数
PropTypes.any.isRequired 任意类型但是必须要传
-
自定义验证 书写方法如下
组件名.propTypes = { 属性名: function(props, propName, componentName) { if(判断条件){ return new Error('填写要返回的报错信息'); } } } -
自定义验证第二种写法(用于数组)
组件名.propTypes = { 属性名: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) { if(判断条件){ return new Error('填写要返回的报错信息'); } }) }
最后，注意 PropTypes 我们只用在开发环境中，上线之前，请删除 PropTypes 相关的代码，以免造成不必须的代码臃余
state
state 可以理解成 props，不一样的在于 props 是只读的，而 state 是可读写。当 state 发生改变的时候会重新执行 render 方法去渲染整颗 DOM 树，在渲染的过程中会有 diff 算法去计算哪些 DOM 有更新，从而提升性能。
在使用 state 前要先初始化 getInitialState
更改 state 一定要用 setState
getInitialState 该方法在每次 render 时都会被调用一次。
ES5中的state
//es5
var StateComponent = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
change: function(event){
this.setState({text: event.target.value});
},
render: function(){
return (
<div>
<p><input type="text" onChange={this.change}/></p>
<p>{this.state.text}</p>
</div>
)
}
})
以人为例子，一个组件就是个人，state是自己努力得来的，state在程序里面一般是通过ajax来向后端要的，或者自己写死的，state是组件自己独有的数据，它不受外界影响，它的数据一般来说是自己提供，并且自己触发更改，相对props是不一样，props是祖传下来的，在Vue这类 MVVM 框架中，数据 Model 变视图 View 变，视图变数据变，而react中的S和V (State和View) 是状态变视图变，但是视图变状态不变
一般来说，我们说的数据驱动，大部分是指（Vue的data）或者（React的state），但是它只是数据的代言人，它不能代表全部，真正的数据指的是类组件里面，所有的props,state和函数等
ES6中的state
开发中我们更常用的是 ES6 的编写方式
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
state = {
text: ''
}
change(event){
this.setState({text: event.target.value});
},
render(){
return (
<div>
<p><input type="text" onChange={this.change}/></p>
<p>{this.state.text}</p>
</div>
)
}
}
更推荐下面这种写法
class Xheader extends React.Component {
constructor(props){
super(props)
// 父传子 老爸给我的
this.props = props;
// 自己拥有的 就是vue组件里面data
this.state = {
"title":"Wscats"
};
}
render() {
return <header>{this.state.title}</header>;
}
}
ReactDOM.render(
<div>Hello World</div>,
document.querySelector("#demo")
)
setState
React 的语法是{}，单向数据绑定，Vue 的语法是{{}}，双向数据绑定
Vue 里面
data变了，view层通过
v-xxx或者{{}}指令，来渲染数据 M->Vview变了，你通过
v-on或者v-model来把数据从视图层带回数据层 V-M
React 里面
State变了，是通过函数式编程和
{}，来渲染数据 S->Vview变了，通过事件触发
setState来更改数据层 V->S
所以我们要更新视图，就必须把关注点放在更改 state 上，而更改 state 就要通过setState方法来实现
<button onClick={this.changeValue.bind(this)}>{this.state.title</button>
上面的<button>值会因为点击而改变，原因就是因为用户触发了点击事件，而事件动用了setState方法更改state的状态，从而更新按钮的值
changeValue(){
console.log(this);
this.setState({
"title":"支付宝"
})
}
