2-3、React使用props以及state、React生命周期localStorage的使用
本节将开启React框架进阶学习第三篇
如果还没有学习 1-1 ~ 1-6 React框架基础的话，建议点我开始React框架基础学习
文章系列（React框架进阶）
2-1、React框架组件化state的使用
2-2、React函数组件、默认props
大家好，我是Counterrr
不忘初心，砥砺前行
本文目录
一、箭头函数的简易化
二、React使用state、props完善小项目
三、React生命周期localStorage的使用
1、箭头函数的简易化：
好的，为了方便，我们还是以之前写的小项目来做例子，我们知道在MySelectLanApp类组件上我们写了：
removeAllFunc () {
this.setState(() => {
return {
languages: []
}
})
}
箭头函数，我们来给它简化下，我们知道箭头函数里面语句就一句，那么可以省略外面花括号，接着还可以省略return关键字，那么写成如下：
removeAllFunc () {
this.setState(() => {
languages: []})
}
那么我们可以看到这个对象的花括号它这边不会解析成对象，而是会解析成代码块的花括号，那么我们就给这个花括号加上括号，表示它这个是一个表达式，具体写法如下：
removeAllFunc () {
this.setState(() => ({
languages: []}))
}
我们再修改valueHandler 函数：
valueHandler (value) {
this.setState(preValue => ({
languages: preValue.languages.concat(value)})
)
}
2、React使用state、props完善小项目：
好的，我们来优化第一项，我们发现当前我们如果输入相同的值则会渲染两次，如下：
这明显不是我们想要的，我们想要在用户输入相同的值的时候，提示用户不能输入相同的值或者不能重复提交，我们将valueHandler函数改成如下：
valueHandler (value) {
if (!this.state.languages.includes(value)) {
alert('不能重复提交')
}
else {
this.setState((preValue) => ({
languages: preValue.languages.concat(value)}))
}
}
我们在接收到input的值后，利用includes函数判断这个value在languages数组中是否存在，如果存在则弹出不能重复提交，不存在的话则给他拼接上去。效果如下：
好的，我们完成了第一个功能。接着完善下第二个功能，我们需要在每个选项上跟踪一个按钮，来确定删除当前选项，而不是全部清除的场景，那这边我们需要注意，因为我们要去操作languages这个数组，所以我们在MySelectLanApp类组件中，加入函数：
removeCurrentValue (value) {
this.setState((preValue) => ({
languages: preValue.languages.filter((item) => {
return item !== value
})
}))
}
注意我们这边不能直接去改变preValue的值，而是要使用一个不会去改变原数组的方法去写这个去除逻辑。
并且在constructor函数中绑定这个函数的this指向:
this.removeCurrentValue = this.removeCurrentValue.bind(this)
然后我们在Options标签上去传递这个函数：
<Options languages={
this.state.languages} removeCurrentValue={
this.removeCurrentValue}></Options>
在Options函数组件去接收这个函数：
const Options = (props) => {
return (<ul>
<Option languages={
props.languages} removeCurrentValue={
props.removeCurrentValue}/>
</ul>)
}
并且将这个函数再传递到Option这个标签上，再在Option这个函数组件上去接收这个函数：
const Option = (props) => {
return (
props.languages.map((item, index) => {
return (<div key={
`option${
index}`}>
<li>{
item}</li>
<button onClick={
() => {
props.removeCurrentValue(item)
}}>删除</button>
</div>)
})
)
}
我们可以看到，我们使用props将函数removeCurrentValue一层一层的传递下来，最后在Option函数组件上去绑定这个移除函数，并且将当前选项值给传递进去，注意我们这边的写法是箭头函数，然后再去触发removeCurrentValue这个函数，那这是为什么呢？为什么不直接写成：
<button onClick={
props.removeCurrentValue(item)}>删除</button>
那如果直接写成这样的话函数没有返回值，则会接收一个undefined，那么点击删除按钮将什么都不发生。
所以我们要写成这样形式：
const Option = (props) => {
return (
props.languages.map((item, index) => {
return (<div key={
`option${
index}`}>
<li>{
item}</li>
<button onClick={
() => {
props.removeCurrentValue(item)
}}>删除</button>
</div>)
})
)
}
好的我们去运行下我的项目：
好的，我们新增加功能的小项目也跑起来了。
3、React生命周期localStorage的使用：
那么我们再来说说当前项目，当写好几个选项后，点击刷新按钮，那么数据将丢失，如果在我们真实的项目中，是不是刷新的话重新向后台去获取数据，或者想localStorage里去取数据，那么我们这边没有后台，就先讲讲localStorage的用法吧。
那么我们先来了解下React的生命周期几个常用的钩子函数，当然这些钩子函数只有在类组件中才可以使用。
第一个钩子函数componentDidMount，这个钩子函数在组件一开始就会调用。
第二个钩子函数componentDidUpdate，这个钩子函数在数据发生改变时就会触发。钩子函数componentDidUpdate接收两个参数，第一个参数是上一次的props，第二个参数是上一次的state。
具体react的生命周期，可以查看这里。
那如何利用这两个钩子函数和我们的localStorage的结合使用呢？我们在MySelectLanApp类组件中写入这两个钩子函数
代码如下：
componentDidMount () {
this.setState(() => ({
languages: JSON.parse(localStorage.getItem('languages')) || []
}))
}
componentDidUpdate(preProps, preState) {
if (this.state.languages.length !== preState.languages.length) {
localStorage.setItem('languages', JSON.stringify(this.state.languages))
}
}
通过代码我们可以知道在每次用户刷新界面时，都去localStorage去取这个数组，如果没有就设置为空数组。在数据发生改变时，并且这次数组的长度和上一次数组的长度不相等时，我们去设置这个localStorage。好的我们再次去运行这个小项目，效果如下：
好的，此时刷新也能够将我们之前输入的值给渲染出来了。
我们通过这个小项目，一点一点去完善它，可以学习到挺多关于react的知识，更快的去了解了react的语法和一些使用技巧。
最后给出这节课修改后的代码：
class MySelectLanApp extends React.Component {
constructor (props) {
super(props)
this.state = {
languages: props.languages
}
this.removeAllFunc = this.removeAllFunc.bind(this)
this.selectLanFunc = this.selectLanFunc.bind(this)
this.valueHandler = this.valueHandler.bind(this)
this.removeCurrentValue = this.removeCurrentValue.bind(this)
}
removeAllFunc () {
this.setState(() => ({
languages: []}))
}
selectLanFunc () {
let len = this.state.languages.length;
let randomNum = Math.floor(Math.random() * len);
alert(`今天学习的语言是: ${
this.state.languages[randomNum]}`);
}
valueHandler (value) {
if (this.state.languages.includes(value)) {
alert('不能重复提交')
}
else {
this.setState((preValue) => ({
languages: preValue.languages.concat(value)}))
}
}
removeCurrentValue (value) {
this.setState((preValue) => ({
languages: preValue.languages.filter((item) => {
return item !== value
})
}))
}
componentDidMount () {
this.setState(() => ({
languages: JSON.parse(localStorage.getItem('languages')) || []
}))
}
componentDidUpdate(preProps, preState) {
if (this.state.languages.length !== preState.languages.length) {
localStorage.setItem('languages', JSON.stringify(this.state.languages))
}
}
render () {
return (<div>
<Header/>
<main>
<ButtonActive isDisabled={
this.state.languages.length == 0} removeAllFunc={
this.removeAllFunc} selectLanFunc={
this.selectLanFunc}></ButtonActive>
<AddLang valueHandler={
this.valueHandler}></AddLang>
<Options languages={
this.state.languages} removeCurrentValue={
this.removeCurrentValue}></Options>
</main>
</div>)
}
}
MySelectLanApp.defaultProps = {
languages: []
}
const Header = (props) => {
return (<header>
<div>{
props.obj.title}</div>
<div>{
props.obj.des}</div>
<div>{
props.obj.tips}</div>
</header>
)
}
Header.defaultProps = {
obj: {
title: '今天学习了吗？',
des: '大家好，我爱撸码。',
tips: '如果学不死就往死里学。'
}
}
const ButtonActive = (props) => {
return (<div>
<button onClick={
props.removeAllFunc}>清除</button>
<button disabled={
props.isDisabled} onClick={
props.selectLanFunc}>选择学习的语言</button>
</div>)
}
class AddLang extends React.Component {
constructor(props) {
super(props)
this.submitFunc = this.submitFunc.bind(this)
}
submitFunc (e) {
e.preventDefault();
let value = e.target.elements.languages.value;
if (value == '') {
alert('请输入！');
}
else {
this.props.valueHandler(value);
e.target.elements.languages.value = '';
}
}
render () {
return (<form onSubmit={
this.submitFunc}>
<div>
<input type="text" name="languages"></input>
<button>添加语言</button>
</div>
</form>)
}
}
const Options = (props) => {
return (<ul>
<Option languages={
props.languages} removeCurrentValue={
props.removeCurrentValue}/>
</ul>)
}
const Option = (props) => {
return (
props.languages.map((item, index) => {
return (<div key={
`option${
index}`}>
<li>{
item}</li>
<button onClick={
() => {
props.removeCurrentValue(item)
}}>删除</button>
</div>)
})
)
}
ReactDOM.render(<MySelectLanApp/>, document.getElementById('app'))