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 (
      
        {this.props.children}
      
    );
  }
}

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

// function里面使用
function funcThemedButton(){
  const theme = useContext(ThemeContext);
  return 
}

forwardRef

React.forwardRef 是 Ref 的转发, 它能够 让父组件访问到子组件的 Ref，从而操作子组件的 DOM。
React.forwardRef 接收一个函数，函数参数有 props 和 ref 。

const TextInput = React.forwardRef((props, ref) => (
  
));

const inputRef = React.createRef();

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

  render() {
    return (
      

        
        Submit
      
    );
  }
}