React’s safe Context API – codeburst

  • It’s purpose is to aid with that specific scenario ğŸ�‰ – But in older versions of React, you should not use it âš ï¸� – If you want your application to be stable, don’t use context.
  • You can read about the drawbacks of the current Context API here 📖 – The good news is there’s a new Context API in React@16.3! And it’s much better 🙌 – So, if you hadn’t heard of or used the Context API until now, there’s no need for FOMO 😅…
  • Here’s a demo of a theme toggle using the new safe version that’s currently obtainable in React@16.3ğŸ‘� – When would I need the Context API?It’s hard to think of an array of scenarios in which you’d need to use the Context API.
  • In many cases it will probably suffice ğŸ‘� – How might we handle it with the Context API?I’m not going to touch on the current release version of the Context API as the docs deter us from using it âš ï¸� – Instead we can take a look at how a solution…
  • Updating it might look like this – The consumer will pass a single render prop which is the current value for the Context ğŸ‘� – Much like Providers, you can have many Consumers within the component tree.

Ever needed to pass a prop down through many levels of the component tree? Did you do it manually? It’s not ideal is it? Did it have to pass through components where it looked out of place? The…
Continue reading “React’s safe Context API – codeburst”

Understanding The React Source Code — Initial Rendering (Class Component) IV

Understanding The #ReactJS Source #Code IV:  via @hackernoon #Javascript

  • /App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; }render() { return ( div className=”App” div className=”App-header” img src=”main.jpg” className=”App-logo” alt=”logo” / h1 “Welcom to React” /h1 /div p className=”App-intro” { this.state.desc } /p /div ); }}export default App;App@App.jsAs mentioned, the component above is rendered…
  • /App.css’;class App extends Component { constructor(props) { super(props); this.state = { desc: ‘start’, }; } render() { return React.createElement( ‘div’, { className: ‘App’ }, React.createElement( ‘div’, { className: ‘App-header’ }, React.createElement( ‘img’, { src: “main.jpg”, className: ‘App-logo’, alt: ‘logo’ } ), React.createElement( ‘h1’, null, ‘ “Welcom to React” ‘ )…
  • Initialize designated data structure:The step is the same as well:1) ReactDOMContainerInfo[ins] represents the container DOM element, TopLevelWrapper is instantiated (TopLevelWrapper[ins]) and is set to alongside the initialization of other properties;3) Again, mountComponentIntoNode is the cross point of upper and lower half, within which returns a complete DOMLazyTree that can be…
  • After those operations complete, the logic processes to the first ramification that is specific to class a `ReactCompositeComponent` from `ReactElement[1]`This step strips the wrapper and creates another ReactCompositeComponent instance to reflect the class component, App.The designated data structure:The call stack in | | | /* we are here */ |…
  • _renderedComponent = child; var markup = transaction, hostParent, hostContainerInfo, debugID); // scr: 3)…// scr: DEV code return designated data structure:The call stack in | | | upper half | /* we are here */ | |Same as in {post two}, the most important task of this step is to instantiate…

Understanding The React Source Code I
Understanding The React Source Code II
Understanding The React Source Code III
Understanding The React Source Code IV (this one) We have completed the rendering…
Continue reading “Understanding The React Source Code — Initial Rendering (Class Component) IV”