Open briefy opened 7 years ago
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"
);
})
);
(<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,
};
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
ref
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
react
React.createElement React.cloneElement
&&document.createElement element.cloneNode
react-proxy
quetions from reading the react source code
isNative
?if you call
setState
in the same event loopmany 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 helpwrite components with more approaches.
react-router
V3 advice: fork the repository and do some notes in it and add a link here