Heads-up in reactjs

[briefy]

react

• when ref is react element and when it is dom element,how do you directly use a react element ?
• how does react manage its children prop,what is the theory behind ?
• what is theory behind the updater in react, as to mean the setState mechanics ?
• how does the key prop work,can i take advantage of it?
• figure out when not to put data in the state,and what is the benifit.
• study React.createElement React.cloneElement && document.createElement element.cloneNode
• what are the differences between browser events and react syntetic events
• a full understanding of server-side rendering of react apps(to next.js pay attention)
• use children prop explicitly,like below,whate happened
• study the react-proxy

quetions from reading the react source code

• what the theory behind isNative ?

<TabPane name="li" children={<div></div>}>
   {
     [1,2,3].map(index=>{
       return 1
     })
   }
</TabPane>

• if you call setState in the same event loop many times, it won't cause to render many times
  but you shouldn't do that if it can be avoided

• make clear about the background mechanism of react-router v4, bundle-loader,to help
  write components with more approaches.

react-router

• V3
  advice: fork the repository and do some notes in it and add a link here
  • study the AsyncUtils
  • createTransitionManager

[briefy]

in react, children prop can be a node or can be an array or even an iterator which yields node type object;

//  the input JSX
const eles = [1,2,3];
<div>
  <div></div>
  {[1,2,3]}
  {eles.map(data=>{
    return (<li>data</li>)
  })}
</div>
// -----------------------------
// the output createElement js
var eles = [1, 2, 3];
React.createElement(
  "div",
  null,
  React.createElement("div", null),
  [1, 2, 3],
  eles.map(function (data) {
    return React.createElement(
      "li",
      null,
      "data"
    );
  })
);

[briefy]

react element

(<Foo></Foo>).type
let ele = <Foo></Foo>; ele.type

  var element = {
    // This tag allow us to uniquely identify this as a React Element
    $$typeof: REACT_ELEMENT_TYPE,

    // Built-in properties that belong on the element
    type: type,
    key: key,
    ref: ref,
    props: props,

    // Record the component responsible for creating this element.
    _owner: owner,
  };

[briefy]

in react, here are some types that you should know:
NODE :
null undefined string number
array
iterator yields node type
react-element(Dom-element || component-element)
ELEMENT
dom-element
component-element

So, React.createElement & React.cloneElement refers to ELEMENT

• whenref is a react element and when it is dom element, how do you directly use a react element ?
  when ref on a dom-element, we can directly use dom properties then;
  when ref on a component-element, we just refer to the component instance