React函数式组件

React组件：可以分为类组件和函数式组件

1、函数式组件中没有state

2、函数式组件中没有生命周期（重点，涉及到生命周期的方法只能在类组建中定义）

可以借助react提供的hooks在函数式组建中做状态和方法

react对象有个useState函数，可以通过该函数创建状态,并且该函数是有返回值的：

const [count,setCount] = useState(0); 
console.log(useState(0)) //[0, ƒ]

得到两个值count和setCount,分别为创建的state和操作state的方法，
名称是根据我们自己的需求命名的，由于该方法返回的是数组，因此我们直接用数组解构
的方式来接收返回值即可

**注意：**使用setCount方法的时候，该方法会将count的值直接修改为传入的实参的值。

export default () => {
    let [count, setCount] = useState(1)    //state部分
    const add = (arg) => { setCount(arg) } //操作状态的方法 }函数组建的三个组成结构
    return (<div>						   //return结构
        <p>{count}</p>
        <button onClick={() => add(count + 1)}>+</button>
    </div>)
}
//每次点击button，setCount都会设置count的值为当前值加1；

函数组建的构成一般也是结构，分为三个部分：

1、state部分；2、操作状态的方法；3、return结构（如上面代码注释所示）

无论一个函数组件多么复杂都应该遵循这个解构来创建。

函数组建中使用props：

使用方式类似类组件的props使用，父级组件需要暴露接口给子组件，子组件才能接收，子组件接收数据的方法：直接作为函数的参数（props）传给子组件。

//父级组件传过去
export default () => {
    let [count, setCount] = useState(1)
    const add = (count) => { setCount(count) }
    return (<div>
        //类似类组件中的接口传递数据到子组件
        <Title count={count} />   
        <button onClick={() => add(count + 1)}>+</button>
    </div>)
}
//子组件接收
export default (props) => {
    return (
        <h1>{props.count}</h1>
    )
}

然后实现button点击实现state中的count值的改变，这个只需要封装好increase和decrease方法，然后通过接口传递给Ibutton组件即可：

export default () => {
    let [count, setCount] = useState(1)
    const changeState = (count) => { setCount(count) }
    return (<div>
        <Title count={count} />
        <Ibutton onClick={() => changeState(count + 1)} name="+" />
        <Ibutton onClick={() => changeState(count - 1)} name="-" />
    </div>)
}
//Ibutton组件代码
export default (props) => {
    return <button onClick={props.onClick}>{props.name}</button>
}

这样子就简单的完成了用函数式组件实现state值得改变。