- A+
所属分类：Web前端
react三大属性
一.状态
类组件
1. state 是组件的属性，值是对象。state中的数据是可读可写的,通过更新state来更新对应的页面显示(重新渲染组件)，通过setState来更新state数据且更新是一种合并 ，在类组件中使用.
组件自定义的方法中this为undefined
(1)强制绑定this: 通过函数对象的bind()
(2)箭头函数
class Demo extends Component { //定义 state = {date: new Date(),count:0}; //为addClick强制绑定this addClick=this.addClick.bind(this); //addClick在未强制绑定this的时候无法在addClick内访问this.state //this指向是undefined addClick(){
const {count} =this.state //修改state中count的值，当点击的时候加1 this.setState({count:count+1}) } //箭头函数 minusClick=()=>{
const {count} =this.state this.setState({count:count-1}) } render() { const {date,count}=this.state return ( <div> <h1>计数{count}</h1> <h2>时间 {date.getDate()}.</h2> <button onClick={this.addClick}>加</button> <button onClick={this.minusClick}>减</button> </div> ); } }
函数组件
1. useState 在函数组件里用 返回一个数组：状态和一个修改状态的方法， 状态需要通过这个方法来进行修改并触发视图更新'渲染页面'
const [count,setCount]=useState(0) const addClick=(()=>{ setCount(count+1) }) const minusClick=(()=>{ setCount(count-1) }) return ( <div> <header> <h3>计数:{count}</h3> <button onClick={addClick}>加</button> <button onClick={minusClick}>减</button> </header> </div> );
