React入门第二天

组件

组件，从概念上类似于 JavaScript 函数。它接受任意的⼊入参（即 “props”），并返回⽤用于描述⻚页⾯面展示内容的 React 元素。组件有两种形式： class组件和function组件。

class组件

class组件通常拥有状态和⽣生命周期， 继承于Component， 实现render⽅方法。⽤用class组件创建⼀一个 Clock：

import React from 'react';
​
export default class Clock extends React.Component{
    constructor(props){
        super(props);
        this.state={date:new Date()};
    }
​
    componentDidMount(){
        this.timerID=setInterval(() => {
            this.setState({date:new Date()});
        }, 1000);//这里timerID要用this来传递，只用const是无法传递的
    }
    componentWillUnmount(){
        clearInterval(this.timerID);
    }
    render(){
        // const {date}=this.state;//这里是另外 一种写法
        return <div>{this.state.date.toLocaleTimeString()}</div>
    }
}

function组件

函数组件通常⽆无状态，仅关注内容展示，返回渲染结果即可。 从React16.8开始引⼊入了了hooks，函数组件也能够拥有状态。 ⽤用function组件创建⼀一个Clock：

import React,{useState,useEffect} from "react";
​
export function Clock(props){
        const [date,setDate]=useState(new Date());
        useEffect(()=>{
            const timer=setInterval(() => {
                setDate(new Date());//这里没有this....就只是setDate与对象this又有不同
            }, 1000);//这里都是函数式组件 ，timer是一个计时器函数 
            return ()=>{clearInterval(timer);};//等于这一个写法 ()=>clearInterval(timer) 写法//清理 也会有问题
            //return的内容在组件unMount的时候使用
        },[]);
        return <div>{date.toLocaleTimeString()}</div>
}

正确使用setState

正确使⽤用setState setState(partialState, callback)

1. partialState : object|function ⽤用于产⽣生与当前state合并的⼦子集。

2. callback : function state更更新之后被调⽤用。

 

关于 setState() 你应该了了解三件事：

不不要直接修改 State

错误代码

// 错误示范
this.state.comment = 'Hello';

 

而是用setState来改变

// 正确使⽤用
this.setState({comment: 'Hello'});

State 的更更新可能是异步的

出于性能考虑， React 可能会把多个 setState() 调⽤用合并成⼀一个调⽤用。 观察以下例例⼦子中log的值和button显示的counter。

import React,{Component} from 'react';
​
export  default class Counter  extends Component{
    constructor(props){
        super(props);
        this.state={value:0};
    }
    changeValue= v=>{
        this.setState({value:this.state.value+v});
    }
    setCounter=()=>{
        this.changeValue(1);
    };
    render(){
        const {value}=this.state;
        return (
            <div>
                <h1>SetStatePage</h1>
                <button onClick={this.setCounter}>{value}</button>
            </div>
        );
    }
}

获取最新的state值的方法

1. 在回调中获取状态值

   changeValue = v => {
   this.setState(
       {
   counter: this.state.counter + v
   },
   () => {
   console.log("counter", this.state.counter);
           }
       );
   };

   2. 使⽤用定时器器：

      setTimeout(() => {
      this.setCounter();
      }, 0);

       

3. 原⽣生事件中修改状态

   componentDidMount(){
   document.body.addEventListener('click', this.changeValue, false)
   }

   总结： setState只有在合成事件和⽣生命周期函数中是异步的，在原⽣生事件和setTimeout中都是同步 的，这⾥里里的异步其实是批量量更更新。

   State 的更更新会被合并

   changeValue = v => {
   this.setState({
   counter: this.state.counter + v
   });
   };
   setCounter = () => {
   this.changeValue(1);
   this.changeValue(2);
   };

   如果想要链式更更新state：

   changeValue = v => {
       this.setState(state => ({ counter: state.counter + v }));
   };
   setCounter = () => {
       this.changeValue(1);
       this.changeValue(2);
   };