装修设计排行榜前十名零基础seo入门教学
类组件
在类组件中要定义内部数据，由两种方案
- 构造器里面定义state属性，在这个对象中定义你需要的数据
constructor(){super()this.state = {count:1}}- 在类的下面直接定义一个属性state(推荐)
state = {count:10}页面要使用state数据
<p>{this.state.count}</p>建议大家在React中使用内部state数据的时候，使用解构的方式将内容解构出来
const {count} = this.state
return (<div><p>{count}</p><button onClick={this.increment}>+</button>
</div>
)内部数据修改方式
- 修改基本数据类型
this.setState({count:20
})
调用setState这个函数，React才能检测到数据发生变化，再次调用render渲染页面内容
- 对象合并
在调用setState的时候，我们传递一个新的对象给函数，将函数里面要修改的内容和原来的内容进行合并，不会产生替换覆盖。
- 修改对象的时候
如果提供了一个新对象，将新对象地址覆盖原来对象的地址。
如果要修改数组里指定的内容
尽量将state的数据解构出来，修改完成过后在替换原来的state里面的对象。
不要频繁操作state，频繁操作state会带来额外的性能开销。
- 强制更新页面
this.forceUpdate()
这个函数是父组件提供的一个函数，用于React组件强制更新。
在开发过程中尽量不要使用。比较消耗性能
关于setState特点
setState这个函数在修改数据的时候，默认是异步函数。
你在修改数据的时候，不想影响代码的执行。
立即获取到修改过后的值，无法实现。
this.setState({count:20
},()=>{console.log(this.state.count);
})提供一个回调函数，可以在回调函数里面获取到修改过后的值。
修改数据也可以提供一个回调
this.setState(()=>{// 执行一些代码,记录日志return {count:20}})这种方式修改数据后，也可以通过回调获取到结果
this.setState(()=>{// 执行一些代码,记录日志return {count:20}},()=>{console.log(this.state.count);})setState不总是异步的。。。
如果setState这个函数是放在定时器或者延时器中使用，立即变成同步任务
setTimeout(() => {this.setState({count: 10})console.log(this.state.count);}, 2000);计算属性
在React中没有像Vue中提供了专门computed来计算属性，类组件中采用get、set存取器的方式来完成计算属性功能
get total(){return this.state.cartList.reduce((sum,next)=>{return sum+=next.price * next.num},0)ttotal}使用total属性的时候，不要把他当成函数来用
{this.total}HOOK内部响应式数据
基本语法
const [count,setCount] = useState(0)修改函数的函数名字可以自己定义,但是一般约定熟成的规范使用set开发,驼峰命令的方式来进行修改
修改基本类型
const [count,setCount] = useState(0)
const [username,setUsername] = useState("xiaowang")const changeState = ()=>{// setCount就是用于修改count的函数setCount(1)}修改引用类型
const [user,setUser] = useState({id:1,name:"xiaowang"})const changeUsername = ()=>{setUser({...user,name:"小张"})}- 修改用户数据的时候,需要返回一个user对象,不能直接修改之前user,更新state的数据
- 修改的时候,会用你传递进去的对象覆盖原来的对象,不会合并对象.
- setState可以合并对象
修改数据的时候还可以使用函数的方式
setCount(()=>{// 执行验证return 10})异步数据修改
调用修改函数对state进行数据赋值,默认情况下异步的.
setCount(10)console.log(count) 0传递函数进去,修改数据同步的方式来执行.
setCount(()=>{return 10
})
console.log(count) 10