《React 属性与状态江湖：从验证到表单受控的实战探险》

属性初识

属性能解决两个大问题：通信和复用

props.js:

import React, { Component } from 'react'
import Navbar from './Navbar'export default class App extends Component {state = {a:100}render() {return (<div><div><h2>首页</h2><Navbar title="首页" leftshow={false}/></div><div><h2>列表</h2><Navbar title="列表" leftshow={true}/></div><div><h2>购物车</h2><Navbar title="购物车" leftshow={true}/></div></div>)}
}

index.js:

import React, { Component } from 'react'export default class Navbar extends Component {state = {//只能内部自己用的，外面无法改变}// 属性是父组件传来的,this.propsrender() {let { title,leftshow } = this.propsconsole.log(leftshow)return (<div>{leftshow && <button>返回</button>}Navbar-{title}<button>home</button></div>)}
}

属性验证

添加属性验证：

import React, { Component } from 'react'
import PropTypes from 'prop-types'export default class Navbar extends Component {state = {//只能内部自己用的，外面无法改变}// 属性是父组件传来的,this.propsrender() {let { title,leftshow } = this.propsconsole.log(leftshow)return (<div>{leftshow && <button>返回</button>}Navbar-{title}<button>home</button></div>)}
}//类属性
Navbar.propTypes = {title:PropTypes.string,leftshow:PropTypes.bool
}

如果是在外面证明是类属性，在里面是对象属性

import React, { Component } from 'react'
import PropTypes from 'prop-types'export default class Navbar extends Component {state = {//只能内部自己用的，外面无法改变}static propTypes = {title:PropTypes.string,leftshow:PropTypes.bool
}// 属性是父组件传来的,this.propsrender() {let { title,leftshow } = this.propsconsole.log(leftshow)return (<div>{leftshow && <button>返回</button>}Navbar-{title}<button>home</button></div>)}
}

这也是一种写法

默认属性

怎么加上默认属性呢？

import React, { Component } from 'react'
import PropTypes from 'prop-types'export default class Navbar extends Component {state = {//只能内部自己用的，外面无法改变}static propTypes = {title:PropTypes.string,leftshow:PropTypes.bool
}// 属性是父组件传来的,this.propsrender() {let { title,leftshow } = this.propsconsole.log(leftshow)return (<div>{leftshow && <button>返回</button>}Navbar-{title}<button>home</button></div>)}
}// 对属性加上默认值
Navbar.defaultProps = {leftshow:true
}

也可以像上面一样进行改写

属性注意

import React, { Component } from 'react'
import Navbar from './Navbar'export default class App extends Component {state = {a:100}render() {//从上面的父组件传来的一个对象var obj = {title:"测试",leftshow: false}return (<div><div><h2>首页</h2><Navbar title="首页" leftshow={false}/></div><div><h2>列表</h2><Navbar title="列表" leftshow={true}/></div><div><h2>购物车</h2><Navbar title="购物车" leftshow={true}/></div><Navbar title={obj.title} leftshow={obj.leftshow}/><Navbar {...obj}/></div>)}
}

当接收的和传过来的一致的时候，就可以简写了

可以这样来控制组件的显示：

props.js:

import React, { Component } from 'react'
import Navbar from './Navbar'
import Sidebar from './Sidebar'export default class App extends Component {render() {return (<div><Navbar title="导航"></Navbar><Sidebar bg="yellow" position="left"></Sidebar></div>)}
}

index.js:

import React from 'react'export default function Sidebar(props) {let {bg,position} = propsvar obj1 = {left:0}var obj2 = {right:0}var obj = {background:bg,width:"200px",position:"fixed"}var styleobj = position==="left"?{...obj,...obj1}:{...obj,...obj2}return (<div style={styleobj}><ul><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li><li>11111</li></ul></div>)
}

状态VS属性

相似点：都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同）

不同点：

1. 属性能从父组件获取，状态不能

2. 属性可以由父组件修改，状态不能

3. 属性能在内部设置默认值，状态也可以，设置方式不一样

4. 属性不在组件内部修改，状态要在组件内部修改

5. 属性能设置子组件初始值，状态不可以

6. 属性可以修改子组件的值，状态不可以 state 的主要作用是用于组件保存、控制、修改自己的可变状态。

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

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

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

孩子无法直接修改属性

import React, { Component } from 'react'class Child extends Component{render(){return <div>child-{this.props.text}<button>click-child</button></div>}
}export default class App extends Component {state = {text:"111111111"}render() {return (<div><button onClick={()=>{this.setState({text:'222222222'})}}>click</button><Child text={this.state.text}/></div>)}
}

表单的受控与非受控

受控组件非受控组件在狭义上是看是否调用ref

但是在广义上是React组件的数据渲染是否被调用者传递的props完全控制，控制则是受控组件，否则不是受控组件

非受控

如果React要编写一个非受控组件，那么久可以使用ref来从DOM节点中获取表单数据，就是非受控组件，比如这样：

import React, { Component } from 'react'export default class App extends Component {myusername = React.createRef()render() {return (<div><h1>登录页</h1><input type='text' ref={this.myusername}value="kerwin"/><button onClick={()=>{console.log(this.myusername.current )}}>登录</button><button onClick={()=>{this.myusername.current.value = ""}}>重置</button></div>)}
}

这种输入框是输不进去东西的，但是改成defaultvalue就不一样了

import React, { Component } from 'react'export default class App extends Component {myusername = React.createRef()render() {return (<div><h1>登录页</h1><input type='text' ref={this.myusername}defaultValue="kerwin"/><button onClick={()=>{console.log(this.myusername.current )}}>登录</button><button onClick={()=>{this.myusername.current.value = ""}}>重置</button></div>)}
}

这就是它在非受控组件中的应用

在原生JS中，onInput是监听输入的变化，onChange是输入变化且焦点移开才监听一次

但是它在React中和onInput一样了

受控

看看受控组件：

import React, { Component } from 'react';// 假设这里定义了 Child 组件
class Child extends Component {render() {return (<div>接收到的值: {this.props.myvalue}</div>);}
}export default class App extends Component {state = {username: "kerwin"};render() {return (<div><h1>登录页</h1><inputtype='text'value={this.state.username}onChange={(evt) => {console.log("onChange", evt.target.value);this.setState({username: evt.target.value});}}/><buttononClick={() => {console.log(this.state.username);}}>登录</button><buttononClick={() => {this.setState({username: ''});}}>重置</button>{/* 直接传递 state 中的 username */}<Child myvalue={this.state.username} /></div>);}
}

由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.value ，这使得 React 的 state 成为唯一数据源。

由于 handlechange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。

对于受控组件来说，输入的值始终由 React 的 state 驱动。你也可以将 value 传递给其他 UI 元素，或者通过其他事件处理函数重置，但这意味着你需要编写更多的代码

受控影院查询案例

对之前的影院案例做更改

import React, { Component } from 'react';
import axios from 'axios';
import BetterScroll from 'better-scroll';export default class Cinema extends Component {constructor(props) {super(props);this.state = {cinemaList: [],mytext:""};this.wrapperRef = React.createRef();this.bs = null;}componentDidMount() {axios({url: 'https://m.maizuo.com/gateway?cityId=610100&ticketFlag=1&k=1315991',headers: {'x-client-info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"1741595630655347584860161","bc":"610100"}','x-host': 'mall.film-ticket.cinema.list'}}).then((res) => {console.log(res.data);this.setState({cinemaList: res.data.data.cinemas,backcinemaList: res.data.data.cinemas}, () => {if (this.wrapperRef.current) {this.bs = new BetterScroll(this.wrapperRef.current);}});}).catch((error) => {console.error('请求出错:', error);});}render() {const { cinemaList } = this.state;return (<div><input value={this.state.mytext}onChange={(evt)=>{this.setState({mytext:evt.target.value})}}/><divref={this.wrapperRef}className="wrapper"style={{ height: '500px', background: 'yellow', overflow: 'hidden', position: 'relative' }}><div className='content' style={{ padding: '10px' }}>{this.getCinemaList().map((item) => (<dl key={item.cinemaId}><dt>{item.name}</dt><dd>{item.address}</dd></dl>))}</div></div></div>);}getCinemaList(){return this.state.cinemaList.filter(item =>item.name.toUpperCase().includes(this.state.mytext.toUpperCase()) ||item.address.toUpperCase().includes(this.state.mytext.toUpperCase()));}
}

获取数据之后进行betterScroll初始化，在修改完状态后，setState后传回调函数，再重新初始化betterScroll解决数据更新后betterScroll长度过长的问题

案例受控todolist

更改成受控组件的写法：

import React, { Component } from 'react'export default class App extends Component {state = {mytext:'',list: [{id: 1,mytext: 'aaa',},{id: 2,mytext: 'bbb',},{id: 3,mytext: 'ccc',},],}render() {return (<div><input value={this.state.mytext} onChange={(evt)=>{this.setState({mytext:evt.target.value})}}/><buttononClick={() => {this.handleClick()}}>add2</button><ul>{this.state.list.map((item,index) => (<li key={item.id}><span dangerouslySetInnerHTML={{__html:item.mytext}}></span><button onClick={()=>{this.handleDelClick(index)}}>删除</button></li>))}</ul><div className={this.state.list.length === 0 ?'':'hidden'}>暂无待办事项</div></div>)}handleClick = () => {let newlist = [...this.state.list]newlist.push({id:Math.random()*100000,        //生成不同id的函数mytext:this.state.mytext})this.setState({list: newlist,mytext:''})}handleDelClick(index){console.log(index)//不要直接修改状态，可能会造成不可预期的问题let newlist = this.state.list.concat()newlist.splice(index,1)this.setState({list:newlist})}
}

我们现在还想要添加一个效果：删除的时候不直接删除，而是添加删除线

添加状态，再添加删除线效果：

import React, { Component } from 'react'export default class App extends Component {state = {mytext:'',list: [{id: 1,mytext: 'aaa',isChecked:false},{id: 2,mytext: 'bbb',isChecked:false},{id: 3,mytext: 'ccc',isChecked:true},],}render() {return (<div><input value={this.state.mytext} onChange={(evt)=>{this.setState({mytext:evt.target.value})}}/><buttononClick={() => {this.handleClick()}}>add2</button><ul>{this.state.list.map((item,index) => (<li key={item.id}><input type='checkbox' checked={item.isChecked} onChange={()=>this.handleChecked(index)}/>{item.isChecked?'删除':'不删除'}<span dangerouslySetInnerHTML={{__html:item.mytext}}style={{textDecoration:item.isChecked?"line-through":""}}></span><button>完成</button><button onClick={()=>{this.handleDelClick(index)}}>删除</button></li>))}</ul><div className={this.state.list.length === 0 ?'':'hidden'}>暂无待办事项</div></div>)}handleChecked = (index)=>{let newlist = [...this.state.list]newlist[index].isChecked = !newlist[index].isCheckedthis.setState({list:newlist})    }handleClick = () => {let newlist = [...this.state.list]newlist.push({id:Math.random()*100000,        //生成不同id的函数mytext:this.state.mytext,isChecked:false})this.setState({list: newlist,mytext:''})}handleDelClick(index){console.log(index)//不要直接修改状态，可能会造成不可预期的问题let newlist = this.state.list.concat()newlist.splice(index,1)this.setState({list:newlist})}
}