0
点赞
收藏
分享

微信扫一扫

React state 和 props总结 defaultProps(默认参数) 不可以在组件内部对props进行修改

我们来一个关于 ​​state​​​ 和 ​​props​​ 的总结。

​state​​ 的主要作用是用于组件保存、控制、修改自己的可变状态。​​state​​​ 在组件内部初始化,可以被组件自身修改,而外部不能访问也不能修改。你可以认为 ​​state​​​ 是一个局部的、只能被组件自身控制的数据源。​​state​​​ 中状态可以通过 ​​this.setState​​​ 方法进行更新,​​setState​​ 会导致组件的重新渲染。

​props​​​ 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数,组件内部无法控制也无法修改。除非外部组件主动传入新的 ​​props​​​,否则组件的 ​​props​​ 永远保持不变。

​state​​​ 和 ​​props​​​ 有着千丝万缕的关系。它们都可以决定组件的行为和显示形态。一个组件的 ​​state​​​ 中的数据可以通过 ​​props​​​ 传给子组件,一个组件可以使用外部传入的 ​​props​​​ 来初始化自己的 ​​state​​。但是它们的职责其实非常明晰分明:​state​​ 是让组件控制自己的状态,​​props​​ 是让外部对组件自己进行配置

如果你觉得还是搞不清 ​​state​​​ 和 ​​props​​​ 的使用场景,那么请记住一个简单的规则:尽量少地用 ​​state​​​,尽量多地用 ​​props​​。

没有 ​​state​​ 的组件叫无状态组件(stateless component),设置了 state 的叫做有状态组件(stateful component)。因为状态会带来管理的复杂性,我们尽量多地写无状态组件,尽量少地写有状态的组件。这样会降低代码维护的难度,也会在一定程度上增强组件的可复用性。

 

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8" />
<title>React defaultProps(默认参数) 不可以在组件内部对props进行修改</title>
<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>
</head>

<body>
可以通过给组件添加类属性 defaultProps 来配置默认参数。
props 一旦传入,你就不可以在组件内部对它进行修改。
但是你可以通过父组件主动重新渲染的方式来传入新的 props,从而达到更新的效果。
<div id="root"></div>
<script type="text/babel">
class Toggle extends React.Component {
static defaultProps = {
likedText: '取消',
unlikedText: '点赞'
}
constructor(props) {
super(props);
this.state = {isToggleOn: true};

// 这个绑定是必要的,使`this`在回调中起作用
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
//this.props.likedText = '取消2'; //修改props会报错
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}

render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? this.props.likedText : this.props.unlikedText}
</button>
);
}
}

ReactDOM.render(
<Toggle />,
document.getElementById('root')
);
</script>
</body>

</html>

 


举报

相关推荐

0 条评论