react-fiber | 易学教程

Is it possible to retrieve a component's instance from a React Fiber?

阅读更多关于 Is it possible to retrieve a component's instance from a React Fiber?

问题 Before v16 of React -- that is, before the introduction of React fibers -- it was possible to take a DOM element and retrieve the React component instance as follows: const getReactComponent = dom => { let found = false; const keys = Object.keys(dom); keys.forEach(key => { if (key.startsWith('__reactInternalInstance$')) { const compInternals = dom[key]._currentElement; const compWrapper = compInternals._owner; const comp = compWrapper._instance; found = comp; } }); return found || null; };

how to render a component by string name

阅读更多关于 how to render a component by string name

问题 I seem to be unable to render components using name strings. I wanted to be able to dynamically generate component name strings which have existing corresponding components that can be rendered. The array const is going to be populated via JSON data, that's why I need to use string values for identifying the component. Here is what I'm trying to do: import Module1 from './module1'; import Module2 from './module2'; import Module3 from './module3'; const array = ['Module1', 'Module2', 'Module3'

how to render a component by string name

阅读更多关于 how to render a component by string name

Order of componentDidMount in React components hierarchy

阅读更多关于 Order of componentDidMount in React components hierarchy

问题 I have an React application that has the following structure: component A is composed of B and C When the component B calls it's componentDidMount method, is this true that all component finished mounting? Or in other words does React fire componentDidMount after all components in the tree were mounted? or e.g. Components B componentDidMount is called when component A mounted? 回答1: According to the documentation, the order of the lifecycle methods on first mount is as follows: constructor()

Where exactly the Virtual DOM is stored?

阅读更多关于 Where exactly the Virtual DOM is stored?

问题 I'm torturing myself for hours now and can't find an answer. Where exactly, under what object/key, the React data are located? I found an object ReactRoot that seems to store all the information about components, but I have no idea where it sits in the window (I guess?) object. It has to be somewhere under the window object, right? If you take a memory snapshot and select the ReactRoot constructor from the list, chrome will create a reference to it under $0 ($0 in chrome). EDIT Is it possible

Why cant react set initial state based on props

阅读更多关于 Why cant react set initial state based on props

问题 I have a es6 react component that I want the initial value of the state to depend on that of the passed down prop, but its value is always false: AttachStateToProps component <AttachStateToProps VALUE=false /> AttachStateToProps component: class AttachStateToProps extends React.Component { state = { stateValue: this.props.VALUE, } render() { console.log('Value of Prop - ', this.props.VALUE) console.log('Value of State - ', this.state.stateValue) return null } } Every time the value of the

What's the difference between hydrate() and render() in React 16?

阅读更多关于 What's the difference between hydrate() and render() in React 16?

问题 I've read the documentation, but I didn't really understand the difference between hydrate() and render() in React 16. I know hydrate() is used to combine SSR and client-side rendering. Can someone explain what is hydrating and then what is the difference in ReactDOM? 回答1: From the ReactDOMServer docs (emphasis mine): If you call ReactDOM.hydrate() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers , allowing you to have a very

React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.”

阅读更多关于 React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”

I'm using the React 16 beta (react-fiber) with server side rendering What I am to understand this to mean? warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>. Looking for that error in the react code it seems that this happens when the SSR html can't be rehydrated. https://github.com/facebook/react/blob/7a60a8092144e8ab2c85c6906dd4a7a5815cff1f/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L1022 So you are somehow initially rendering a different tree on the client vs the server. Just change express response from <body> <div id="root"> ${markup} </div> </body> to

React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>.”

阅读更多关于 React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”

问题 I'm using the React 16 beta (react-fiber) with server side rendering What I am to understand this to mean? warning.js:36 Warning: Did not expect server HTML to contain a <div> in <div>. 回答1: Looking for that error in the react code it seems that this happens when the SSR html can't be rehydrated. https://github.com/facebook/react/blob/7a60a8092144e8ab2c85c6906dd4a7a5815cff1f/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L1022 So you are somehow initially rendering a different tree on the

Does React Native have a 'Virtual DOM'?

阅读更多关于 Does React Native have a 'Virtual DOM'?

问题 From ReactJS wiki page about Virtual DOM: React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently. This allows the programmer to write code as if the entire page is rendered on each change while the React libraries only render subcomponents that actually change. In other words, Virtual DOM allows us to improve performance by avoiding direct manipulations with DOM. But what about React Native? We know that in