react隨筆之hooks（二）

useContext

全新的 Context API 可以很容易穿透組件而無副作用，其包含三部分：React.createContext，Provider，Consumer。

• React.createContext 是一個函數，它接收初始值並返回帶有 Provider 和 Consumer 組件的對象；
• Provider 組件是數據的發佈方，一般在組件樹的上層並接收一個數據的初始值；
• Consumer 組件是數據的訂閱方，它的 props.children 是一個函數，接收被髮布的數據，並且返回 React Element；

const ThemeContext = React.createContext("light");

// 用該組件包裹被使用組件的父級組件
class ThemeProvider extends React.Component {
  state = { theme: "light" };

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

// 使用
class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

// function裏面使用
function funcThemedButton(){
  const theme = useContext(ThemeContext);
  return <Button theme={theme} />
}

forwardRef

React.forwardRef 是 Ref 的轉發, 它能夠讓父組件訪問到子組件的 Ref，從而操作子組件的 DOM。
React.forwardRef 接收一個函數，函數參數有 props 和 ref 。

const TextInput = React.forwardRef((props, ref) => (
  <input type="text" placeholder="Hello forwardRef" ref={ref} />
));

const inputRef = React.createRef();

class App extends Component {
  handleSubmit = event => {
    event.preventDefault();
    alert("input value is:" + inputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <TextInput ref={inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}