前言

正儿八经开学了，但是自从答辩完之后状态一直回不来，不想学习不想动，就想着睡觉想着玩，但是每天又无故焦虑，面试题没有刷，体测没有练等等等等。

多多少少很焦虑了属于是。

不管那么多了，这次简单记录一下在做项目的过程中遇到的一些React的迷惑点。

React中的一些不理解点

其实还挺多的，主要是基础比较差，做的过程中经常会在细节中出现各种错误，纠正后也是一知半解，现在回过头来好好康康。

1. Props与State

相比之下来说，Props与State的主要区别在于props是不可变的，state是可变的，所以组件都是通过定义state来更新改变数据，子组件就只能通过props来传递数据。

在实际应用中，可以通过在父组件中设置state，然后在子组件上利用props传递值，render中常用。例如在项目中，modal（模态框）的展现与否就是在父组件中设置一个state（show？true: false），然后通常在子组件中利用visible这个props来控制。

大体上来说，state更像是人的心情，而props更像是人的行为。（maybe，个人理解。）

2. 类组件与函数组件

似乎从简单上来看，function就是函数组件（毕竟有函数嘛），类组件就是class咯，

function HelloWorld(props){
    return (<h1>Hello World!</h1>)
}
// function函数组件

class Welcome extends React.component{ //继承component类
    render() //含有render函数
    {
        return <h1>Hello World!</h1>;
    }

}
//class类组件

函数组件里面可以直接写表达式，然后最后直接return就行，类组件里面必须包含render函数，再里面return。

?3. 箭头函数

这个箭头函数蛮有意思的，做项目的时候其实也不明白原因，但是经常表达式出现问题的时候换成箭头函数就好了。（感觉就像是匿名函数的简化写法）

?区别上在于调用的时候也不太一样。箭头函数是不需要bind一起使用的，
1. update() {}? ? ? ? ? ? ? ? this.update.bind(this)
2. update = () => {}? ? ? ?this.update

4. Hooks

这个Hooks是这个项目过程中一直不太明白的东西，看上去又是一种比较简单的函数组件的写法。

看到别的文章里面说到，React团队更加推崇使用函数组件而不是类组件，但是函数组件不存在状态管理和生命周期，所以显得并不是特别的好。但是类组件在简单页面下代码太复杂，为了解决类组件功能齐全但是很重、函数轻便但是限制多的问题，React团队设计了Hooks，加强版的函数组件，完全不用class，就能写出全功能的组件。

最常用的四种钩子：

useState()
userContext()
userReducer()
useEffect()

1. useState状态钩子

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } 
  return (
    <>
      <p>{count}</p>
      <button onClick={addcount}>count++</button>
    </>
  )
}
export default AddCount

在useState()中，它接受状态的初始值作为参数，即上例中计数的初始值，它返回一个数组，其中数组第一项为一个变量，指向状态的当前值。类似this.state,第二项是一个函数，用来更新状态,类似setState。该函数的命名，我们约定为set前缀加状态的变量名。

2. useContext共享状态钩子

在组件之间共享状态。通常是一个createContext，另一个useContext

import React,{ useContext } from 'react'
const Ceshi = () => {
  const AppContext = React.createContext({})
  const A =() => {
    const { name } = useContext(AppContext)
    return (
        <p>我是A组件的名字{name}<span>我是A的子组件{name}</span></p>
    )
}
const B =() => {
  const { name } = useContext(AppContext)
  return (
      <p>我是B组件的名字{name}</p>
  )
}
  return (
    <AppContext.Provider value={{name: 'hook测试'}}>
    <A/>
    <B/>
    </AppContext.Provider>
  )
}
export default Ceshi

具体参考一下：https://www.jianshu.com/p/d600f749bb19