React知识点记录

函数组件

React.FC 函数组件是最简单的组件定义方式，它接收唯一的 props 参数

• useState 通过hooks直接定义变量和方法；
• 无生命周期，通过useEffect更新操作；
• 无实例，无法使用 ref

export default functioin Index(props) {
    const [count, setCount] = useState(0)
    // 使用 useEffect 
    userEffect(()=> {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );
      setData(result.data);
    }, [])
   
    return (<div> Index Page { count }</div>)
}

Class组件

React.Compont class 组件可以共享 state

• 拥有生命周期；
• state 的定义修改不同；
• 可以使用 ref 获取元素

class Index extends React.Compont {
    // 构造函数
    constroctor(props) {
        super(props)
        this.state = {
            arg: 'denson'
        }
    }

    // 挂在后执行
    componentDidMount() {
        document.title = `You Clicked ${count} times`
    }

    render () {
        return <div> Index Page { this.state.arg }</div>
    }
}

总结：

1. 组件定义方式不同；

2. （因为组件定义方式不同）生命周期不同：class组件有，函数组件无；

3. （因为生命周期不同）副作用操作执行不同：class组件通过生命周期函数，函数组件用hook的useEffect；

4. state的定义、读取、修改方式不同：函数组件用hook的useState；

5. this：class组件有，函数组件无；

6. 实例：class组件有，函数组件无；

7. （因为实例不同）ref使用不同：class组件有，函数组件无；

8. 使用上： 官方推荐函数组件。

原文链接：https://blog.csdn.net/outlierQiqi/article/details/120275423

---

Fragment

<React.Fragment> 用来包裹多个根元素，并且不会创建额外的节点；

// 使用
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    <React.Fragment/>
  );
}

<></>

<></> 类似 Fragment ，是 React.Fragment 的语法糖，法不能接受键值或属性；

// 使用
render() {
  return (
    <>
      <ChildA />
      <ChildB />
      <ChildC />
    </>
  );
}

---

useState

useState 方法返回一个 sate 和更新 state 的函数，可以传入 state 默认的参数；
const [name, seName] = useState(‘denson’)

注意：setState更新时异步的，多次调用可能只执行了1次：

this.setName({
    number: this.state.number - 1
})
this.setName({
    number: this.state.number - 1
}) 
// 只执行一次 - 1，因为大批量更新合并成一次更新

this.setName((state) => {
    return { number: state.name - 1 }
})
this.setName((state) => {
    return { number: state.name - 1 }
})
// 使用回调可以达到多次更新目的

useEffect

useEffect 方法在 render 挂在后执行，接收一个函数作为参数，第二个参数可以根据变换再次执行；

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );

      setData(result.data);
    };

    fetchData();
  }, []);
// https://blog.csdn.net/xiaodi520520/article/details/110169180

---

纯函数

• 确定的输入，产生确定的输入；
• 不产生副作用

const addOne = x => x + 1
const addOneItem = arr => arr.map(addOne)

副作用

• 系统IO，相关API；
• Math.now()、Math.random() 等不确定的输出；
• 在函数内修改函数参数值；
• http 请求等；

总结：具有不确定性的操作，不是纯函数的。

---

export interface

export type

umi 连接调用