Heads-up in reactjs

[briefy]

react

• [x] when ref is react element and when it is dom element,how do you directly use a react element ?
• [x] 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

• [x] 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

• [x] 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