$30 off During Our Annual Pro Sale. View Details »

new version of context in React 16.3

sota ohara
March 30, 2018
1.6k

new version of context in React 16.3

sota ohara

March 30, 2018
Tweet

Transcript

  1. new version of context in React 16.3 - We Are

    JavaScripters! @17th Mercari, inc. Frontend Engineer Sota Ohara
  2. about me Sota Ohara / sottar Mercari, inc. / Souzoh,

    inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
  3. • New life-cycle methods The functions that will be deprecated

    are: • componentWillMount • componentWillUpdate • componentWillReceiveProps New method is: • static getDerivedStateFromProps • StrictMode API • AsyncMode • Update React DevTools • Update Context API ….. What’s new in React v16.3
  4. • Typically, data in a React application is passed top-

    down (parent to child) via props. • So, we also need to pass the related entire site values each layer components motivation it’s too painful !!
  5. • The value set in the context can be acquired

    from any child component. • New component types: Provider and Consumer.
 • Refer to the ancestor as the provider 
 and the child as the consumer
 • Providers and consumers come in pairs New context API
  6. * A provider-consumer pair is created using * requires a

    default value React.createContext() React.createContext()
  7. * The provider accepts a context value as a prop


    * In the typical scenario, context value has in state. and updated by calling setState. Provider
  8. * The consumer uses a render prop API
 * In

    the typical scenario, context value has in state
 and updated by calling setState. Consumer