React 基础

setState

• 异步操作

生命周期

componentDidMount () {} // 组件创建好dom之后，挂载进页面的时候调用
//componentWillReceiveProps () {} // 组件接收到一个新的 prop的时候被调用
shouldComponentUpdate (nextProps, nextState) {} // return 一个 boolean值， false的话 组件不会更新
componentDidUpdate () {} // 组件更新后被调用
componentWillUnmount () {} // 组件销毁后被调用

image-20210223100905693.png

HOOKS

出现的意义: 给函数式组件添加状态 (state， 生命周期)

• useState

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• useEffect

  给函数 添加 副作用 (充当 生命周期？)

 useEffect(() => {
     alert('changed');
 });
 // 页面更新就会执行 模拟 componentDidUpdate


 useEffect(() => {
    // http request
  }, []); // 相当于 componentDidMount 这个生命周期函数

useEffect(() => {
    // do something...
}, [count]) // 只有count发生变化的时候会执行，有点像Vue中的Watch

useEffect(() => {
    // http request
    return () => {
        // 组件在销毁的时候调用 模拟componentWillUnmount
    }
  }, []);

// useEffect里的匿名函数不能添加 async 关键字

• Context 和 useContext

  为了解决跨组件数据注入的问题，尤其是props深层传值

  还得是provider包着，但是取数据的时候 在子组件中引用父辈组件的Context，使用useContext就可以，省掉了Consumer的形式

  import React, { useContext } from "react";
  import ReactDOM from "react-dom";
  
  const TestContext= React.createContext({});
  
  const Navbar = () => {
    const { username } = useContext(TestContext)
  
    return (
      <div className="navbar">
        <p>{username}</p>
      </div>
    )
  }
  
  const Messages = () => {
    const { username } = useContext(TestContext)
  
    return (
      <div className="messages">
        <p>1 message for {username}</p>
      </div>
    )
  }
  
  function App() {
    return (
    <TestContext.Provider 
        value={{
            username: 'superawesome',
        }}
    >
        <div className="test">
            <Navbar />
            <Messages />
        </div>
    <TestContext.Provider/>
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
  

高阶组件 (HOC)

• 一个返回了组件的函数
• 通过组件嵌套的方法给子组件添加更多功能
• 接受一个组件作为参数并返回一个经过改造的新组件
• 通常用来提取公共业务逻辑操作，而对组件怎么渲染不管