react 入门

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>
    );

 

热门相关:首席的独宠新娘   情生意动   薄先生,情不由己   网游之逆天飞扬   照见星星的她