Non-dom manipulation of react

1. Non-dom properties?
   Dangerouslysetinnerhtml,ref,key
   Non-dom standard attributes, which means that there are no specified attributes in the DOM standard, react introduces three non-dom attributes, as above.
   
   dangerouslysetinnerhtml: Literally, dangerous to set the internal HTML, the function of this property is to insert the HTML code directly in the JSX. Why do we use this attribute to insert HTML code? Instead of writing the code directly? Because sometimes when we write code, we can't really insert any code, which means that this part of the HTML code is generated dynamically. Or is it not written by us, why is this behavior dangerous? There is a word called a cross-site attack, the reason for a cross-site attack, is because there is such a direct write code function, we give an example, if the page to display a content, this content from the user's input, Suppose the user's input contains code, such as JS Code, HTML code, if we do not go through the detection of the direct use, the DOM inserted into the page, then other people visit the page, it will execute this person write code, because we can not judge the user's intentions, So he is likely to write very dangerous code, such as adding a connection, connected to a Trojan, then access to this page users will unknowingly in the virus or download Trojan, which is very dangerous, but sometimes we do need to write code dynamically, so react still provide this property, It is only clear that it is dangerous to tell you this property in the name, try not to use it.
   
   The ref:reference abbreviation, the parent component refers to the subassembly, when we write the component, we often use the nesting situation, if the parent component is nested the child component, the parent component refers to the child component's time, needs to use the ref, in the actual use ref actually maintains many references in the parent component, Each reference is referenced to a corresponding subassembly, so that we can manipulate the subcomponents in the parent component through these references. Why can't we manipulate parent components of parent components? This is actually not a code problem, but a design problem, in react we use components to make the code modular, each component only needs to consider its own function, logic, does not need to care who is using it, so the component does not need to reference his own parent component, The interaction between the parent component and the component is implemented through the passing of properties, which we will say later. But such a pass is one-way, that is, the property is always passed up and down, the following component does not control the above component, in order to make the logic clearer,
   
   Key: Improve rendering performance. One of the characteristics of react is good performance, this is because he removed the manual DOM operation, completely automated to implement, but the automatic implementation shows that he has a set of algorithms, also said that when the page changes, react need to apply this algorithm to determine how to efficiently modify the page to reflect the corresponding changes, This algorithm is often referred to as a diff, or different abbreviation, that represents the difference between two states.
   
   
   
2. React diff algorithm
   
   Flowchart of React diff algorithm
   The first thing we need to make clear is that we are comparing two components, everything in react is a component, so as long as we understand how the two components are compared, the other structures can be decomposed into components for comparison.
   The left is the beginning, the first judgment after the beginning is whether the node is the same, the same meaning is the Div and Div is the same, Div and p are different, or our custom hellomessage and HelloMessage are the same, hellowmessage And HelloWorld is not the same component, if the node is the same as the subsequent comparison, if the node is different, react will discard the old node directly, generate a brand-new node, here react is based on a hypothesis, if the two nodes are different, then their content is very much different. If the node is different we will directly end the comparison, generate a brand-new node, if the node is the same, the next step is to determine whether this point is a custom node or the standard DOM node, that is, he is a div or helloworld, if not a custom node, is the standard node, So react the next thing to do is to compare the properties of two nodes, such as Class,id, if the properties are identical, it means that two nodes are the same, end the comparison, if the attributes are different, write down the different attributes, and apply the changes, such as a new attribute, add a new attribute, One less attribute deletes an attribute, similar to an operation. That is, react does not delete the old node, it only operates on top of him. If it is a custom node, react will re-render him, we will learn the properties and state later, a component has a lot of state, if it is the same custom component, then the new component may be just a state of the old component, said REAC will pass the new state into the old component, and then compare the rendering results of the component, And make changes, which means that react still does not regenerate the component, but changes it on the old component, which is the whole process of the diff algorithm. So what's the use of key? Key function is mainly reflected in the comparison of nodes, assuming we have a similar list of nodes, that is, the parent node has more than one child node, then if there is no key, we make changes, react will be more silly from left to right to compare, for example, before the change only node 1, After the change we inserted a node 2, became Node 2, node 1, then react to perform the operation is to delete node 1, add node 2, add node 1, that is, react cannot determine the new state of the node 1 is the state of the node 1, so he can only delete all the different, Even if they may be the same, this leads to performance problems, then the purpose of introducing key is to give each node a unique identity, so that react by comparing key, you can know exactly which node is the original node, which node is the newly added node, for the example we just said, Node 1 becomes node 2 node 1, at this time, react only need to do an operation, is to insertNode 2, because the key of node 1 is the same, the two of them are the same node, no change.
   Understand this principle and what are the implications for us to write react components?
   The 1th is that if two components are very similar, try to write them as a component, as we see in the process that two different components are bound to be regenerated, even if their content is very similar. The second revelation is that if you use a similar list to present elements, then the elements can be combined with key as much as possible, thus greatly improving efficiency and avoiding unnecessary performance losses.
   
   
   
3. How do I use non-dom properties?
   Examples of dangerously
   

   <! DOCTYPE html>
   
   Ref instance, note that by reference not the DOM node itself, it is said that we do not operate between the DOM, such as setting the text, so it is not possible, we have only a virtual DOM node, that is, react display to our DOM node, If you want to get a real DOM node, you also need to call a method, which we will say later, but react does not encourage us to do so, unless in special cases, we need to manipulate the DOM node, other situations react will help us to operate,
   
   This example is not complete, we will continue to explain later.
   
   <! DOCTYPE html>
   
   Key instance: Note that within each component, the value of key must be different, note the inside of the component! There is no such limit between the two components.
   Remember two points: 1, Content-similar components as far as possible merge is called the same component, 2 list type elements, must add a unique key, to achieve these two points, you can avoid many performance problems.
   <! DOCTYPE html>

Non-dom manipulation of react