new version of context in React 16.3

1bf676e4bd36a48bf616c82d6f52c83a?s=47 sota ohara
March 30, 2018
980

new version of context in React 16.3

1bf676e4bd36a48bf616c82d6f52c83a?s=128

sota ohara

March 30, 2018
Tweet

Transcript

  1. 1.

    new version of context in React 16.3 - We Are

    JavaScripters! @17th Mercari, inc. Frontend Engineer Sota Ohara
  2. 2.

    about me Sota Ohara / sottar Mercari, inc. / Souzoh,

    inc. Frontend Engineer mercari NOW, CSTool @sottar_ sottar
  3. 6.

    • 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. 8.

    • 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. 9.

    • 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. 11.

    * A provider-consumer pair is created using * requires a

    default value React.createContext() React.createContext()
  7. 12.

    * 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. 13.

    * The consumer uses a render prop API
 * In

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