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>
    );
  }
}