React 原理与工程实践

class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}

ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById("hello-example")
);

// 创建地图
const map = new Map.map(document.getElementById("map"), {
zoom: 4,
center: { lat, lng },
});

// 创建标记
const marker = new Map.marker({
position: { lat, lng },
title: "Hello Marker",
});

// 地图上添加标记
marker.setMap(map);

<Map zoom={4} center={(lat, lng)}>
<Marker position={(lat, lng)} title={"Hello Marker"} />
</Map>

const Header = () => {
return (
<Jumbotron style={{ backgroundColor: "orange" }}>
<h1>TODO App</h1>
</Jumbotron>
);
}

class Dashboard extends React.Component {
constructor(props) {
super(props);

this.state = {};
}
render() {
return (
<div className="dashboard">
<ToDoForm />
<ToDolist />
</div>
);
}
}

class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}

updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 };
});
}

render() {
return (
<button onClick={() => this.updateCount()}>
Clicked {this.state.count} times
</button>
);
}
}

this.setState(
{
name："JS每日一题"，
},
() => console.log("setState finished")
);

class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}

const element = <Welcome name="Sara" onNameChanged={this.handleName} />;

class sup {
constructor(name) {
this.name = name;
}

printName() {
console.log(this.name);
}

class sub extends sup {
constructor(name, age) {
super(name); // super代表的事父类的构造函数
this.age = age;
}

printAge() {
console.log(this.age);

}

let jack = new sub("jack", 20);
jack.printName(); //输出 : jack
jack.printAge(); //输出 : 20

class sub extends sup {
constructor(name, age) {
this.age = age;
super(name);// super代表的事父类的构造函数
}
}

// React 内部
const instance = new YourComponent(props);
instance.props = props;

class HelloMessage extends React.Component {
render() {
return <div>nice to meet you! {this.props.name}</div>;
}
}

class Button extends React.Component {
constructor(props) {
super(); // 没传入 props
console.log(props); //{}
console.log(this.props); // undefined
//..
}
}

class Button extends React.Component {
constructor(props) {
super(props); // 没传入 props
console.log(props); //{}
console.log(this.props); // {}

class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Hello, {this.props.name}</h1>
}
}

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
constructor(props) {
super(props)
}
render() {
return <h1>Hello, {this.props.name}</h1>
}
}

const FunctionalComponent = () => {
const [count, setCount] = React.useState(0);

return(
<div>
<p>count: {count}</p >
<button onClick={() => setCount(count + 1)}>Click</button>
</div>
);
};

const FunctionalComponent = () => {
useEffect(() => {
console.log("Hello");
}, []);
return <h1>Hello, World</h1>;
};

const FunctionalComponent = () => {
React.useEffect(() => {
return () => {
console.log("Bye");
};
}, []);
return <h1>Bye, World</h1>;
};

//你的代码
function SayHi() {
return<p>Hello, React</p >
}
// React内部
const result = SayHi(props) // » <p>Hello, React</p >

//你的代码
class SayHi extends React.Component {
render() {
return <p>Hello, React</p >
}
}
// React内部
const instance = new SayHi(props) // » SayHi {}
const result = instance.render() // » <p>Hello, React</p >

function ProfilePage(props) {
const showMessage = () => {
alert('Followed ' + props.user);
}

const handleClick = () => {
setTimeout(showMessage, 3000);
}

return (
<button onClick={handleClick}>Follow</button>
)
}

class ProfilePage extends React.Component {
showMessage() {
alert('Followed'+ this.props.user);
}

handleClick() {
setTimeout(this.showMessage.bind(this), 3000);
}

render() {
return <button onClick={this.handleClick.bind(this)}>Follow</button>
}
}

class TestComponent extends React.Component {
constructor (props) {
super(props);
this.state = { username: 'lindaidai' };
}
render () {
return <input name="username"value={this.state.username} />
}
}

import React, { Component } from 'react';

export class UnControll extends Component {
constructor (props) {
super(props);
this.inputRef = React.createRef();
}
handleSubmit = (e) => {
console.log('我们可以获得input内的值为'，this.inputRef.current.value);
e.preventDefault();
}
render () {
return (
<form onSubmit={e => this.handleSubmit(e)}>
<input defaultValue="lindaidai" ref={this.inputRef} />
<input type="submit" value="提交" />
</form>
)
}
}

const button = <button onClick={handleClick}>按钮</button>

const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button onClick={handleClick}>按钮</button>

// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>

// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>

//原生事件事件处理函数写法
<button onclick="handleClick()">按钮命名</button>

//React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>

import React from 'react';
class App extends React.Component{

constructor(props) {
super(props);
this.parentRef = React.createRef();
this.childRef = React.createRef();
}
componentDidMount() {
console.log("React componentDidMount! ");
this.parentRef.current?.addEventListener("click", () => {
console.log("原生事件：父元素 DoM事件监听！");
});
this.childRef.current?.addEventListener("click", () => {
console.log("原生事件：子元素 DOM 事件监听！");
});
document.addEventListener("click", (e) => {
console.log("原生事件：document DOM 事件监听！");
});
}
parentClickFun = () => {
console.log("React 事件：父元素事件监听！");
};
childClickFun = () => {
console.log("React 事件：子元素事件监听！");
};
render() {
return (
<div ref={this.parentRef} onClick={this.parentClickFun}>
<div ref={this.childRef} onClick={this.childClickFun}>
分析事件执行顺序
</div>
</div>
);

export default App;

原生事件：子元素DOM事件监听！
原生事件：父元素 DOM事件监听！
React事件：子元素事件监听！
React 事件：父元素事件监听！
原生事件：document DOM 事件监听！

document.body.addEventListener('click', e => {
if (e.target && e.target.matches('div.code')) {
return;
}
this.setState({active: false,});});
}

class ShowAlert extends React.Component {
showAlert() {
console.log("Hi");
}

render() {
return <button onClick={this.showAlert}>show</button>;
}
}

class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render( ) {
return (
<div onClick={this.handleClick.bind(this)}>test</div>
)
}
}

class App extends React.Component {
handleClick() {
console.log('this > ', this);
}
render( ) {
return (
<div onClick={e => this.handleClick(e)}>test</div>
)
}
}

class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}

class App extends React.Component {
constructor(props) {
super(props);
}
handleClick = () => {
console.log('this > ', this);
}
render() {
return (
<div onClick={this.handleClick}>test</div>
)
}
}

function HelloComponent(props, /* context */) {
return <div>Hello {props.name}</div>
}

function HelloComponent(props) /\* context \*/{
return React.createElement(
"div",
null,
"Hello ",
props.name
);
}

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}

tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}

componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
clearInterval(this.interval);
}

render() {
return (
<div>
Seconds: {this.state.seconds}
</div>
);
}
}

import React, { Component } from "react";

const div1 = {
width: "300px",
margin: "30px auto",
backgroundColor:"#44014C"，//驼峰法
minHeight: "200px",
boxSizing: "border-box"
};

class Test extends Component {
constructor(props, context) {
super(props);
}

render( ) {
return (
<div>
<div style={div1}>123</div>
<div style={{backgroundColor:"red"}}>
</div>
);
}
}

export default Test;

.title {
color: red;
font-size: 20px;
}

.desc {
color: green;
text-decoration: underline;
}

import React, { PureComponent } from'react';

import Home from './Home';

import './App.css';

、 export default class App extends PureComponent {
render(){
return (
<div className="app">
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p >
<Home/>
</div>
)
}
}

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.module.css';

、 export default class App extends PureComponent {
render() {
return (
<div className="app">
<h2 className="title">我是App的标题</h2>
<p className="desc">我是App中的一段文字描述</p >
<Home/>
</div>
)
}

export const SelfLink = styled.div
height: 50px;
border: 1px solid red;
color: yellow;
`;

export const SelfButton = styled.div
height: 150px;
width: 150px;
color: ${props => props.color};
background-image: url(${props => props.src});
background-size: 150px 150px;

import React, { Component } from "react";

import { SelfLink, SelfButton } from "./style";

class Test extends Component {
constructor(props, context) {
super(props);
}

render() {
return (
<div>
<SelfLink title="People's Republic of China">app.js</SelfLink>
<SelfButton color="palevioletred" style={{ color: "pink" }} src={fi
st}>
SelfButton
</SelfButton>
</div>
);
}
}

export default Test;

getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('#enter getSnapshotBeforeUpdate');
return 'foo';
}

componentDidUpdate(prevProps, prevState, snapshot) {
console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

function EmailInput(props) {
return (
<label>
Email: <input value={props.email} />
</label>
);
}

const element = <EmailInput email="123124132@163.com" />;

class Parents extends Component {
constructor() {
super();
this.state = {
price: 0
};
}

getItemPrice(e) {
this.setState({
price: e
});
}

render() {
return (
<div>
<div>price: {this.state.price}</div>
{/*向子组件中传入一个函数 */}
<Child getPrice={this.getItemPrice.bind(this)} />
</div>
);
}
}

class Child extends Component {
clickGoods(e) {
//在此函数中传入值
this.props.getPrice(e);

render() {
return (
<div>
<button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
<button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
</div>
);
}
}

class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {count: 0}
}
setCount = ( ) => {
this.setState({count: this.state.count + 1})
}
render() {
return(
<div>
<SiblingA
count={this.state.count}
1>
<SiblingB
onClick={this.setCount}
/>
</div>
);
}
}

const PriceContext = React.createContext('price')

<PriceContext.Provider value={100}>
</PriceContext.Provider>

class MyClass extends React.Component {
static contextType = PriceContext;
render() {
let price = this.context;
/* 基于这个值进行渲染工作 */
}
}

<PriceContext.Consumer>
{/*这里是一个函数*/}
{
price => <div>price: {price}</div>
}
</PriceContext.Consumer>

const EnhancedComponent = highOrderComponent(WrappedComponent);

import React, { Component } from 'react';

export default (WrappedComponent) => {
return class EnhancedComponent extends Component {
// do something
render() {
return <WrappedComponent />;
}
}
}

function withLogging(WrappedComponent) {
class Enhance extends WrappedComponent {
componentWillReceiveProps() {
console.log('Current props', this.props);
console.log('Next props', nextProps);
}
render() {
const {forwardedRef, ...rest} = this.props;
//把 forwardedRef 赋值给 ref
return <WrappedComponent {...rest} ref={forwardedRef} />;
}
};

// React.forwardRef 方法会传入 props 和 ref 两个参数给其回调函数
// 所以这边的 ref 是由 React.forwardRef 提供的
function forwardRef(props, ref) {
return <Enhance {...props} forwardRef={ref} />
}

return React.forwardRef(forwardRef);
}
const EnhancedComponent = withLogging(SomeComponent);

import React, { Component } from 'react'

class MyComponent extends Component {

componentWillMount() {
let data = localStorage.getItem('data');
this.setState({data});
}

render() {
return <div>{this.state.data}</div>
}
}

import React, { Component } from 'react'

function withPersistentData(WrappedComponent) {
return class extends Component {
componentWillMount() {
let data = localStorage.getItem('data');
this.setState({data});
}

render() {
// 通过{...this.props}把传递给当前组件的属性继续传递给被包装的组件WrappedCo
mponent
return <WrappedComponent data={this.state.data} {...this.props} />
}
}
}

class MyComponent2 extends Component {
render() {
return <div>{this.props.data}</div>
}
}

const MyComponentWithPersistentData = withPersistentData(MyComponent2)

class Home extends React.Component {
render() {
return (<h1>Hello World.</h1>);
}
}
function withTiming(WrappedComponent) {
return class extends WrappedComponent {
constructor(props) {
super(props);
this.start = 0;
this.end = 0;
}
componentWillMount() {
super.componentWillMount && super.componentWillMount();
this.start = Date.now();
}
componentDidMount() {
super.componentDidMount && super.componentDidMount();
this.end = Date.now();
console.log(`${WrappedComponent.name}组件渲染时间为 ${this.end
- this.start} ms`);
}
render() {
return super.render();
}
};
}

export default withTiming(Home);

export default class App2 extends React.PureComponent {

state = {show: true};

onToggle = () => this.setState({show: !this.state.show});

render() {
const {show} = this.state;
return (
<div className={'container'}>
<div className={'square-wrapper'}>
<CSSTransition
in={show}
timeout={500}
classNames={'fade'}
unmountOnExit={true}
>
<div className={'square'} />
</CSSTransition>
</div>
<Button onClick={this.onToggle}>toggle</Button>
</div>
);

.fade-enter {
opacity: 0;
transform: translateX(100%);
}

.fade-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 500ms;

.fade-exit {
opacity: 1;
transform: translateX(0);
}

.fade-exit-active {
opacity: 0;
transform: translateX(-100%);
transition: all 500ms;
}

import { SwitchTransition, CSSTransition } from "react-transition-group";

export default class SwitchAnimation extends PureComponent {
constructor(props) {
super(props);

this.state = {
isOn: true
}
}

render() {
const { isOn } = this.state;

return (
<SwitchTransition mode="out-in">
<CSSTransition classNames="btn"
timeout={500}
key={isOn ? "on" : "off"}>
{
<button onClick={this.btnClick.bind(this)}>
{isOn ? "on": "off"}
</button>
}
</CSSTransition>
</SwitchTransition>
)
}

btnClick() {
this.setState({ isOn: !this.state.isOn })
}
}

.btn-enter {
transform: translate(100%, 0);
opacity: 0;
}

.btn-enter-active {
transform: translate(0, 0);
opacity: 1;
transition: all 500ms;
}

.btn-exit {
transform: translate(0, 0);
opacity: 1;
}

.btn-exit-active {
transform: translate(-100%, 0);
opacity: 0;
transition: all 500ms;
}

import React, { PureComponent } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group';

export default class GroupAnimation extends PureComponent {
constructor(props) {
super(props);

this.state = {
friends: []
}
}

render() {
return (
<div>
<TransitionGroup>
{
this.state.friends.map((item, index) => {
return (
<CSSTransition classNames="friend" timeout={300} key={inde
x}>
<div>{item}</div>
</CSSTransition>
)
})
}
</TransitionGroup>
<button onClick={e => this.addFriend()}>+friend</button>
</div>
）
}

addFriend() {
this.setState({
friends: [...this.state.friends, "coderwhy"]

}

.friend-enter {
transform: translate(100%, 0);
opacity: 0;

.friend-enter-active {
transform: translate(0, 0);
opacity: 1;
transition: all 500ms;
}

.friend-exit {
transform: translate(0, 0);
opacity: 1;
}

.friend-exit-active {
transform: translate(-100%, 0);
opacity: 0;
transition: all 500ms;
}

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
//更新state 使下一次渲染能够显示降级后的 UI
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
//你同样可以将错误日志上报给服务器
logErrorToMyService(error, errorInfo);
}

render() {
if (this.state.hasError) {
// 你可以自定义降级后的 UI 并渲染
return <h1>Something went wrong.</h1>;
}

return this.props.children;
}
}

<ErrorBoundary>
<MyWidget1>
</ErrorBoundary>

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { error: null };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
try {
//执行操作，如有错误则会抛出
} catch (error) {
this.setState({ error });
}
}

render()
if (this.state.error) {
return <h1>Caught an error.</h1>
}
return <button onClick={this.handleClick}>Click Me</button>
}
}

window.addEventListener('error', function(event) { ... })

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref="myref" />;
}
}

this.refs.myref.innerHTML ="hello";

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}
当 ref 被传递给render 中的元素时，对该节点的引用可以在 ref 的 current 属性中访问
const node = this.myRef.current;

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render( ) {
return <div ref={element => this.myref = element} />;
}
}

const node = this.myref

function App(props) {
const myref = useRef()
return (
<V
<div ref={myref}></div>
<1>

import React, { Component } from 'react'

export default class App extends Component {
constructor(props) {
super(props);

this.state = {
message: "Hello World"
}
}

render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={e => this.changeText()}>面试官系列</button>
</div>
)
}

changeText() {
this.setState({
message："JS每日一题"
})
}
}

changeText() {
this.state.message = "你好啊,李银河";
}

Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object'||
typeof partialState === 'function'||
partialState == null,
'setState(...): takes an object of state variables to update or a '+
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback,'setState');
};

changeText() {
this.setState({
message:"你好啊"
})
console.log(this.state.message); // Hello World
}

changeText() {
this.setState({
message："你好啊"
}, ( ) => {
console.log(this.state.message); // 你好啊
});
}

changeText() {
setTimeout(() => {
this.setState({
message:"你好啊
});
console.log(this.state.message); // 你好啊
}, 0);
}

componentDidMount() {
const btnEl = document.getElementById("btn");
btnEl.addEventListener('click', () => {
this.setState({
message："你好啊，李银河"
});
console.log(this.state.message); // 你好啊,李银河
})
}

handleClick = () => {
this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1

this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1

this.setState({
count: this.state.count + 1,
})
console.log(this.state.count) // 1
}

Object.assign(
previousState,
{index: state.count+ 1},
{index: state.count+ 1},

onClick = ( ) => {
this.setState((prevState, props) => {
return {count: prevState.count + 1};
});
this.setState((prevState, props) => {
return {count: prevState.count + 1};
});
}

class Foo extends React.Component {
render() {
return <h1> Foo </h1>;
}
}

function Foo() {
return <h1> Foo </h1>;
}

return (
<div className='cn'>
<Header> hello </Header>
<div> start </div>
Right Reserve
</div>
)

return (
React.createElement(
'div',
{
className : 'cn'
},
React.createElement(
Header,
null,
'hello'
),
React.createElement(
'div',
null,
'start'
),
'Right Reserve'
)

class Foo extends React.Component {
state = { count: 0 };

increment = () => {
const { count } = this.state;

const newCount = count < 10 ? count + 1 : count;

this.setState({ count: newCount });
};

render() {
const { count } = this.state;
console.log("Foo render");

return (
<div>
<h1> {count} </h1>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}

function Foo() {
const [count, setCount] = useState(0);

function increment() {
const newCount = count < 10 ? count + 1 : count;
setCount(newCount);
}

console.log("Foo render");

return (
<div>
<h1> {count} </h1>
<button onClick={increment}>Increment</button>
</div>
);
}

class App extends React.Component {
state = { name: "App" };
render() {
return (
<div className="App">
<Foo/>
<button onClick={() => this.setState({ name: "App" })}>
Change name
</button>
</div>
);
}
}

function Foo() {
console.log("Foo render");

return (
<div>
<h1> Foo </h1>
</div>
);

function App(){
const [name,setName] = useState('App')

return (
<div className="App">
<Foo />
<button onClick={() => setName("aaa")}>
{ name }
</button>
</div>
)
}

function Foo() {
console.log("Foo render");

return (
<div>
<h1> Foo </h1>
</div>
);
}

<div id="root">
<h1>Hello World</h1>
</div>
Virtual Dom，本质上是以JavaScript 对象形式存在的对 DOM的描述
创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实 D
OM的属性——照应
在 React 中，JSX 是其一大特性，可以让你在 JS 中通过使用 XML 的方式去直接声明界面
的 DOM 结构

// 创建h1 标签，右边千万不能加引号
const vDom = <h1>Hello World</h1>;
// 找到 <div id="root"></div> 节点
const root = document.getElementById("root");
// 把创建的 h1 标签渲染到 root 节点上
ReactDOM.render(vDom, root);

const vDom = React.createElement(
'h1',
{ className: 'hClass', id: 'hId' },
'hello world'
)

<div>
< img src="avatar.png" className="profile" />
<Hello />
</div>

React.createElement(
"div",
null,
React.createElement("img", {
src: "avatar.png",
className: "profile"
}),
React.createElement(Hello, null)
);

ReactDOM.render(<App />, document.getElementById("root"));

class ClassComponent extends Component {
static defaultProps = {
color: "pink"
};
render( ) {
return (
<div className="border">
<h3>ClassComponent</h3>
<p className={this.props.color}>{this.props.name}</p >
</div>
);
}

function FunctionComponent(props) {
return (
<div className="border">
FunctionComponent
<p>{props.name}</p >
</div>
);
}

const jsx = (
<div className="border">
<p>xx</p>
< a href=" ">xxx</ a>
<FunctionComponent name="函数组件"/>
<ClassComponent name="类组件"color="red" />
</div>
);

function createElement(type, config, ...children) {
if (config) {
delete config.__self;
delete config.__source;
}
//！源码中做了详细处理，比如过滤掉key、ref等
const props = {
...config,
children: children.map(child =>
typeof child === "object" ? child : createTextNode(child)
)
};
return {
type,
props
};
}
function createTextNode(text) {
return {
type: TEXT,
props: {
children: [],
nodeValue: text
}
};
}
export default {
createElement
};

ReactDOM.render(element, container[, callback])

function render(vnode, container) {
console.log("vnode", vnode); // 虚拟DoM对象
// vnode _> node
const node = createNode(vnode, container);
container.appendChild(node);
}

//创建真实DOM节点
function createNode(vnode, parentNode) {
let node = null;
const {type, props} = vnode;
if (type === TEXT) {
node = document.createTextNode("");
} else if (typeof type === "string") {
node = document.createElement(type);
} else if (typeof type === "function") {
node = type.isReactComponent
? updateClassComponent(vnode, parentNode)
: updateFunctionComponent(vnode, parentNode);
} else {
node = document.createDocumentFragment();
}
reconcileChildren(props.children, node);
updateNode(node, props);
return node;
}

//遍历下子vnode，然后把子vnode->真实DoM节点，再插入父node中
function reconcileChildren(children, node) {
for (let i = 0; i < children.length; i++) {
let child = children[i];
if (Array.isArray(child)) {
for (let j = 0; j < child.length; j++) {
render(child[j], node);
}
} else {
render(child, node);
}
}
}
function updateNode(node, nextVal) {
Object.keys(nextVal)
.filter(k => k !== "children")
.forEach(k => {
if (k.slice(0, 2) === "on") {

let eventName = k.slice(2).toLocaleLowerCase();
node.addEventListener(eventName, nextVal[k]);

} else {

node[k] = nextVal[k];

}

});

}

//返回真实dom节点

//执行函数

function updateFunctionComponent(vnode, parentNode) {

const {type, props} = vnode;

let vvnode = type(props);

const node = createNode(vvnode, parentNode);

return node;

}

//返回真实dom节点

//先实例化，再执行render函数

function updateClassComponent(vnode, parentNode) {

const {type, props} = vnode;

let cmp = new type(props);

const vvnode = cmp.render();

const node = createNode(vvnode, parentNode);

return node;

}

export default {

render

};

type Fiber = {
//用于标记fiber的WorkTag类型，主要表示当前fiber代表的组件类型如FunctionCompone
nt、ClassComponent等
tag: WorkTag,
// ReactElement里面的key
key: null | string,
// ReactElement.type，调用createElement`的第—个参数
elementType: any,
// The resolved function/class/ associated with this fiber.
//表示当前代表的节点类型
type: any,
//表示当前FiberNode对应的element组件实例
stateNode: any,

//指向他在Fiber节点树中的`parent`，用来在处理完这个节点之后向上返回
return: Fiber | null,
// 指向自己的第一个子节点
child: Fiber | null,
//指向自己的兄弟结构，兄弟节点的return指向同一个父节点
sibling: Fiber | null,
index: number,

ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,

//当前处理过程中的组件props对象
pendingProps: any,
//上一次渲染完成之后的props
memoizedProps: any,

//该Fiber对应的组件产生的Update会存放在这个队列里面
updateQueue: UpdateQueue<any>| null,

//上一次渲染的时候的state
memoizedState: any,

一个列表，存放这个Fiber依赖的context
firstContextDependency: ContextDependency<mixed> |null,

mode: TypeOfMode,

// Effect
//用来记录Side Effect
effectTag: SideEffectTag,