zzzmj / duola-blog Goto Github PK

class Counter extends Component {
    render() {
        const { caption, onClickDecrementButton, onClickIncrementButton, value } = this.props
        return (
            <div>
                <button style={style} onClick={onClickIncrementButton} >+</button>
                <button style={style} onClick={onClickDecrementButton} >-</button>
                <span>{caption} count: {value}</span>
            </div>
        )
    }
}

const Counter = (props) => {
    const { caption, onClickDecrementButton, onClickIncrementButton, value } = props
    return (
        <div>
            <button style={style} onClick={onClickIncrementButton} >+</button>
            <button style={style} onClick={onClickDecrementButton} >-</button>
            <span>{caption} count: {value}</span>
        </div>
    )
}

import store from '../Store.js';

class CounterContainer extends Component {
    constructor(props) {
        super(props)
        this.state = this.getOwnState()
        this.onClickIncrementButton = this.onClickIncrementButton.bind(this)
        this.onClickDecrementButton = this.onClickDecrementButton.bind(this)
        this.onChange = this.onChange.bind(this)
    }

    shouldComponentUpdate(nextProps, nextState) {
        // 避免不必要的渲染
        return (nextProps.caption !== this.props.caption) || 
            (nextState.value !== this.state.value);
    }

    componentDidMount() {
        // 通过store.subscribe()监听组件变化，只要组件的状态变化，就会调用onChange方法
        store.subscribe(this.onChange)
    }

    componentWillUnmount() {
        // 组件删除后，注销监听
       store.unsubscribe(this.onChange)
    }

    getOwnState() {
        return {
            value: store.getState()[this.props.caption]
        }
    }

    onChange() {
        const newState = this.getOwnState()
        this.setState(newState)
    }

    onClickIncrementButton() {
        store.dispatch(Actions.increment(this.props.caption))
    }

    onClickDecrementButton() {
        store.dispatch(Actions.decrement(this.props.caption))
    }

    render() {
        return (
            <Counter caption={this.props.caption}
                onClickDecrementButton={this.onClickDecrementButton} 
                onClickIncrementButton={this.onClickIncrementButton}
                value={this.state.value} />
        )
    }
}

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class Provider extends Component {
    // 1. 实现getChildContext，返回代表context的对象
    getChildContext() {
        return {
            store: this.props.store
        }
    }

    render() {
        // 简单的将子组件渲染出来
        return this.props.children
    }
}

// 2. 通过childContextTypes静态属性来声明提供给子组件的属性
Provider.childContextTypes = {
    store: PropTypes.object
}

export default Provider

<Provider>  
    <ControlPanel />
</Provider>

ReactDOM.render(
    <Provider store={store}>
        <ControlPanel />
    </Provider>,
    document.getElementById('root')
)

class CounterContainer extends Component {
    constructor(props, context) {
        // 得带上参数context, 
        super(props, context)
    }

    // ...
}

// 子组件需要通过一个静态属性contextTypes声明后，才能访问父组件Context对象的属性
CounterContainer.contextTypes = {  
    store: PropTypes.object
}

// 完整写法
const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter)
export default CounterContainer;

// 第二个是可选参数，这个参数代表着容器组件的props
function mapStateToProps(state, ownProps) {
    const { caption } = ownProps
    return {
        value: state[caption]
    }
}

// 第二个是可选参数，这个参数代表着容器组件的props
function mapDispatchToProps(dispatch, ownProps) {
    const {caption} = ownProps
    return {
        onIncrement: () => {
            dispatch(Actions.increment(caption))
        },
        onDecrement: () => {
            dispatch(Actions.decrement(caption))
        }
    }
}

<Provider store={store}>  
    <ControlPanel />
</Provider>

const todoList = props => {
    const { todos, onToggleTodo, onRemoveTodo } = props
    return (
        <div>
            <ul>
                {todos.map(todo => (
                    <TodoItem
                        key={todo.id}
                        text={todo.text}
                        completed={todo.completed}
                        onToggleTodo={() => onToggleTodo(todo.id)}
                        onRemoveTodo={() => onRemoveTodo(todo.id)}
                    />
                ))}
            </ul>
        </div>
    )
}

// ...
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(todoList)


// TodoItem
const TodoItem = (props) => {
    const { text, completed, onToggleTodo, onRemoveTodo } = props
    const checked = completed ? 'checked' : ''
    return (
        <li>
            <input type="checkbox" onClick={onToggleTodo} checked={checked} readOnly />
            <span>{text}</span>
            <button onClick={onRemoveTodo}>删除</button>
        </li>
    )
}

class TodoItem extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        // completed或者text发生变化时，才重新渲染
        return (nextProps.completed !== this.props.completed) || 
        (nextProps.text !== this.props.text)
    }
    render() {
        const { text, completed, onToggleTodo, onRemoveTodo } = this.props
        const checked = completed ? 'checked' : ''
        return (
            <li>
                <input type="checkbox" onClick={onToggleTodo} checked={checked} readOnly />
                <span>{text}</span>
                <button onClick={onRemoveTodo}>删除</button>
            </li>
        )
    }
}

// 原有的结构
<div>
    <Todos />
</div>

// 更新
<span>
    <Todos />
</span>

// 原状态
<ul>
    <TodoItem text="First" completed={false}>  
    <TodoItem text="Second" completed={false}>
</ul>

// 更新
<ul>
    <TodoItem text="Zero" completed={false}>
    <TodoItem text="First" completed={false}>  
    <TodoItem text="Second" completed={false}>
</ul>

// ActionTypes.js
export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

// Action.js
import * as ActionTypes from './ActionTypes'

export const increment = (counterCaption) => {
    return {
        type: ActionTypes.INCREMENT,
        counterCaption: counterCaption
    }
}

export const decrement = (counterCaption) => {
    return {
        type: ActionTypes.DECREMENT,
        counterCaption: counterCaption
    }
}

import { createStore } from 'redux'
import reducer from './Reducer.js'

const initValue = {
    'First': 0,
    'Second': 10,
    'Third': 20
}

const store = createStore(reducer, initValue)

export default store

class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = this.getOwnState()
        //...
    }

    getOwnState() {
        const { caption } = this.props
        return {
            value: store.getState()[caption]
        }
    }
}

import store from '../Store'

//...
componentDidMount() {
   // 通过store.subscribe()监听组件变化，只要组件的状态变化，就会调用onChange方法
   store.subscribe(this.onChange)
}

componentWillUnmount() {
   // 组件删除后，注销监听
   store.unsubscribe(this.onChange)
}

onChange() {
  const newState = this.getOwnState()
  this.setState(newState)
}

onClickIncrementButton() {
  const { caption } = this.props
  store.dispatch(Actions.increment(caption))
}

onClickDecrementButton() {
  const { caption } = this.props
  store.dispatch(Actions.decrement(caption))
}

// 发布订阅模式
function createStore(reducer, initState) {
    let state = initState
    let listeners = []

    function subscribe(listener) {
        listeners.push(listener)
    }

    function dispatch(action) {
        // 按照 reducer 修改 state
        state = reducer(state, action)
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i]
            listener()
        }
    }

    function getState() {
        return state
    }

    return {
        subscribe,
        dispatch,
        getState,
    }
}

export default createStore

import React, { Component } from 'react';

class ContentContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      msg: ''
    };
  }

  loadMessage() {
    this.setState({
      loading: true
    });
    setTimeout(() => {
      const message = ['这是第一条信息', '这是第二条信息', '这是第三条信息'];
      this.setState({
        loading: false,
        msg: message[this.props.id]
      });
    }, 1000);
  }

  componentDidMount() {
    this.loadMessage();
  }

  // 根据不同的props更新状态
  componentDidUpdate(preProps) {
    if (preProps.id !== this.props.id) {
      this.loadMessage();
    }
  }

  render() {
    return <Content loading={this.state.loading} msg={this.state.msg} />;
  }
}

const Content = props => {
  const { loading, msg } = props;
  return <div>{loading ? <p>loading.....</p> : <div>一些信息：{msg}</div>}</div>;
};

class Tab extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: 0
    };
  }

  handleClick = id => {
    this.setState({ id });
  };

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick(0)}>点击0</button>
        <button onClick={() => this.handleClick(1)}>点击1</button>
        <button onClick={() => this.handleClick(2)}>点击2</button>
        <ContentContainer id={this.state.id} />
      </div>
    );
  }
}

export default Tab;

import React, { useState, useEffect } from 'react'

const useContent = (id) => {
  const [loading, setLoading] = useState(false)
  const [msg, setMsg] = useState('')

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      const message = ['这是第一条信息', '这是第二条信息', '这是第三条信息'];
      setLoading(false);
      setMsg(message[id])
    }, 1000);
  }, [id])

  return [loading, msg]
}

const Content = ({ id }) => {
  const [loading, msg] = useContent(id)
  return <div>{loading ? <p>loading.....</p> : <div>一些信息：{msg}</div>}</div>;
}

const TabHooks = () => {
  const [id, setId] = useState(0)

  return (
    <div>
      <button onClick={() => setId(0)}>点击0</button>
      <button onClick={() => setId(1)}>点击1</button>
      <button onClick={() => setId(2)}>点击2</button>
      <Content id={id}/>
    </div>
  )
}

export default TabHooks

var score = [...] // 存放了所有学生的成绩
for (var i = 0; i <= 100; i++) {
	var sum = 0; // 计算考了i分的同学有多少个
	for (var j = 0; j < score.length; j++) {
		if (i == score[j]) {
			sum++
		}
	}
	console.log('考了' + i + '分的同学有' + sum + '人')
}

var total = 1000 // 学生的人数
var res = new Array(total).fill(0)
for (var i = 0; i < score.length; i++) {
	res[score[i]]++
}

for (var i = 0; i <= 100; i++) {
	console.log('考了' + i + '分的同学有' + res[i]+ '人')
}

// 原先无关的两个
const t = {
    name: 'zmj',
}
const getName = (age) => {
    return this.name + '今年' + age + '岁啦'
}
getName.call(t, 18)

// 原理其实就这样
const t = {
    name: 'zmj',
    getName: (age) => {
        return this.name + '今年' + age + '岁啦'
    }
}

t.getName(18)

Function.prototype.call = function (context) {
    context.fn = this
    var args = [...arguments].slice(1)
    let res = context.fn(...args)
    delete context.fn
    return res
}

Function.prototype.call = function (context) {
    // 严谨一些，如果传入的context是基本类型，那么将它包装成引用类型
    // 如果没传那么就是window
    context = context ? Object(context) : window; 
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }
    var res = eval('context.fn(' + args +')');

    delete context.fn
    return res;
}

Function.prototype.apply = function(context, args) {
    context.fn = this
    let res = context.fn(...args)
    delete context.fn
    return res
}

const t = {
    name: 'zmj',
}
const getName = (age) => {
    return this.name + '今年' + age + '岁啦'
}

// 第一种使用方法
const foo = getName.bind(t, 18)
foo() // zmj今年18岁啦

// 第二种使用方法
const foo = getName.bind(t)
foo(18) // zmj今年18岁啦

Function.prototype.bind = function(context) {
    const args = [...arguments].slice(1)
    const self = this
    return function() {
        return self.apply(context, [...args, ...arguments])
    }
}

const t = {
    name: 'zmj',
    price: '$100'
}
function getName(age) {
    console.log(this.name + '今年' + age + '岁啦')
}

// 第一种使用方法
const Foo = getName.bind(t, 18)

const f = new Foo(18) // undefined今年18岁啦

Function.prototype.bind = function(context) {
    const args = [...arguments].slice(1)
    const self = this
    const foo = function() {
        // 如果调用的函数的原型foo的原型链上，说明被new了。。
        if (this instanceof foo) {
            return self.apply(this, [...args, ...arguments])
        } else {
            return self.apply(context, [...args, ...arguments])
        }
    }
    // 返回的函数原型指向 调用函数的原型
    foo.prototype = this.prototype
    return foo
}

const promise = new Promise((resolve, reject) => {
        const r = new XMLHttpRequest()
        r.open(method, url, false)
        r.onreadystatechange = () => {
            if (r.readyState == 4 && r.status) {
                // 成功后传入值
                resolve(r.response)
            } else {
                // 失败后传入error
                reject(err)
            }
        }
        r.send()
    })

// 定义三个常量，标记promise运行的状态
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'

class Promise {
    constructor(executor) {
        this.status = PENDING
        // 储存成功的值
        this.value = undefined
        // 储存失败的原因
        this.reason = undefined
        try {
            executor(this.resolve, this.reject)
        } catch(err) {
            this.reject(err)
        }
    }

    resolve = (val) => {
        if (this.status !== PENDING) return 
        this.status = FULFILLED
        this.value = val
    }

    reject = (err) => {
        if (this.status !== PENDING) return 
        this.status = REJECTED
        this.reason = err
    }
}

ajax('get', url).then((res) => {
	console.log('成功', res)
}, (err) => {
	console.log('失败', err)
})

then(onFulfilled, onRejected) {
    const { status, value, reason } = this
    if (status === FULFILLED) {
        onFulfilled(value)
    } else if (status === REJECTED)  {
        onRejected(reason)
    }
}

resolve = (val) => {
    if (this.status !== PENDING) return 
    this.status = FULFILLED
    this.value = val
    // 发布
    this.fullfilledListner.forEach(listner => listner(val))
}

reject = (err) => {
    if (this.status !== PENDING) return 
    this.status = REJECTED
    this.reason = err
    // 发布
    this.rejectedListner.forEach(listner => listner(err))
}

then = (onFulfilled, onRejected) => {
    const { status, value, reason } = this
    if (status === PENDING) {
        // 订阅
        this.fullfilledListner.push(onFulfilled)
        this.rejectedListner.push(onRejected)
    } else if (status === FULFILLED) {

        onFulfilled(value)
    } else if (status === REJECTED)  {
        onRejected(reason)
    }
}

let p = new Promise((resolve,reject)=>{
    resolve(1);
});

p.then(res => {
    console.log(res) // 输出1
    return 2; //返回一个普通值
}).then(res => {
    console.log(res); //输出2，这里由于没有return，于是返回一个用Undefined包装的Promise对象
});

let p = new Promise((resolve, reject) => {
    resolve(1);
});

p.then(res => 2) // 这里包装了一个 2 的Promise对象
.then()
.then()
.then(res => {
    console.log(res); //2
});

Promise.prototype.then = function (onFulfilled, onRejected) {
    // 注意这是当前Promise的状态
    const { status } = this

    // 这是我们要返回的新Promise
    var newPromise = new Promise((resolve, reject) => {
        // 代码略...
    }
    return newPromise;
};

 this.fullfilledListner.push(() => {
   // 这是上一个Promise的结果
   let x = onFulfilled(this.value)
   resolvePromise(newPromise, x, resolve, reject)
 })

then = (onFulfilled, onRejected) => {
    const { status, value, reason } = this
    const newPromise = new MyPromise((resolve, reject) => {
        if (status === PENDING) {
            this.fullfilledListner.push(() => {
                let x = onFulfilled(this.value)
                resolvePromise(newPromise, x, resolve, reject)
            })
            this.rejectedListner.push(() => {
                let x = onRejected(this.value)
                resolvePromise(newPromise, x, resolve, reject)
            })
        } else if (status === FULFILLED) {
            let x = onFulfilled(value)
            resolvePromise(newPromise, x, resolve, reject)
        } else if (status === REJECTED)  {
            let x = onRejected(reason)
            resolvePromise(newPromise, x, resolve, reject)
        }
    })
    return newPromise
}

/**
 * 解析then返回值与新Promise对象
 * @param {Object} newPromise 新的Promise对象
 * @param {*} x then返回值
 * @param {Function} resolve 新Promise对象的resolve
 * @param {Function} reject 新Promise对象的reject
 */
const resolvePromise = (newPromise, x, resolve, reject) => {
    // ...
}

let promise2 = p.then(data => {
    return promise2;
});

// 解决循环引用
if (newPromise === x) {
    reject(new TypeError('Chaining cycle detected for promise'))
}

// then方法返回值如果是Promise对象
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
        let then = x.then
        // 如果返回值x中包含then方法，说明返回值x肯定是个Promise对象
        if (typeof then === 'function') {
            // 调用 then()
            then.call(x, (res) => resolve(res), (err) => reject(err))
        } else {
            resolve(x)
        }
    } catch(err) {
        reject(err)
    }
} else {
    // 对应六条规则中的第二条规则，普通属性直接包装成Promise返回成功即可
    resolve(x)
}

p.then(data => {
    return new MyPromise((resolve,reject)=>{
        // resolve传入的还是Promise
        resolve(new MyPromise((resolve,reject)=>{
            resolve(2)
        }))
    })
}).then(data => {
    // 于是
    // data 不是我们想要的2
    // 而是 new MyPromise((resolve, reject) => { // ... })
})

// then方法返回值如果是Promise对象
if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    try {
        let then = x.then
        // 如果返回值x中包含then方法，说明返回值x肯定是个Promise对象
        if (typeof then === 'function') {
            // 调用 then()
            then.call(
                x, 
                (res) => resolvePromise(newPromise, res, resolve, reject), 
                (err) => reject(err)
            )
        } else {
            resolve(x)
        }
    } catch(err) {
        reject(err)
    }
} else {
    // 对应六条规则中的第二条规则，普通属性直接包装成Promise返回成功即可
    resolve(x)
}

Promise.resolve = function(val) {
    return new Promise((resolve, reject) => {
        resolve(val)
    })
}

Promise.reject = function(val) {
    return new Promise((resolve, reject) => {
        reject(val)
    })
}

// race方法
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(resolve, reject)
        };
    })
}

//all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
Promise.all = function (promises) {
    let arr = [];
    let i = 0;
    function processData(index, data) {
        arr[index] = data;
        i++;
        if (i == promises.length) {
            resolve(arr);
        };
    };
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(data => {
                processData(i, data);
            }, reject);
        };
    });
}

问：变量对象和活动对象的区别？
答：它们其实是同一个对象，只是处于执行上下文不同的生命周期，变量对象是在执行上下文创建过程中建立的，当执行上下文进入了代码执行阶段，变量对象就会变为活动对象

var iterator = function(arr) {
  var index = 1
  return {
    next: function() {
      if (index < arr.length) {
        return {
          value: arr[index++],
          done: false,
        }
      } else {
        return {
          done: true,
        }
      }
    }
  }
}

var it = iterator([1, 2, 3, 4])

it.next() // 1
it.next() // 2

var generator = function* (arr) {
  for(let i = 0; i < arr.length; i++) {
    yield arr[i]
  }
}

var it = generator([1, 2, 3, 4, 5])

it.next() // {value: 1, done: false}
it.next() // {value: 2, done: false}
it.next() // {value: 3, done: false}
// ...

var fs = require('fs')

var dealCallback = (err, data) => {
  console.log('data', data.toString())
  gen.next(data)
}
var read = function* (arr) {
  yield fs.readFile('1.txt', dealCallback)
  yield fs.readFile('2.txt', dealCallback)
  yield fs.readFile('3.txt', dealCallback)
}

var gen = read()
gen.next()
// 依次打印
// 1.txt
// 2.txt
// 3.txt

// 普通的readFile
readFile('file.txt', (err, data) => {
  console.log(data.toString())
})

// thunk化后的readFile
var readFile = function(filename) => {
  return function(callback) {
    fs.readFile(filename, callback)
  }
}

var thunk = readFile('file.txt')
thunk((err,data) => {
  console.log(data.toString())
})

// 这个thunkify并不能用于生产环境，特殊情况没有考虑
var thunkify = function(fn) {
  return function() {
    var args = [].slice.call(arguments)
    return function(callback) {
      args.push(callback)
      fn.apply(this, args)
    }
  }
}

var readFile = thunkify(fs.readFile)
readFile('file.txt')((err,data) => {
  console.log(data.toString())
})

var readFile = thunkify(fs.readFile)
var read = function* (arr) {
  var file1 = yield readFile('1.txt')
  console.log('file1', file1.toString())
  var file2 = yield readFile('2.txt')
  console.log('file2', file2.toString())
  var file3 = yield readFile('3.txt')
  console.log('file3', file3.toString())
}

var gen = read()

var t = gen.next()
t.value((err, data) => {
  t = gen.next(data)
  t.value((err, data) => {
    t = gen.next(data)
    t.value((err, data) => {
      t = gen.next(data)
    })
  })
})
// 这里注意next的调用
// 因为next方法的参数表示上一个yield表达式的返回值，第一次next的参数无效，用以启动生成器

var run = function(fn) {
  var gen = fn()
  function next(err, data) {
    var res = gen.next(data)
    if (res.done) {
      return 
    }
    res.value(next)
  }
  next()
}

var read = function* (arr) {
  var file1 = yield readFile('1.txt')
  console.log('file1', file1.toString())
  var file2 = yield readFile('2.txt')
  console.log('file2', file2.toString())
  var file3 = yield readFile('3.txt')
  console.log('file3', file3.toString())
}

run(read)

var readFile = function(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err)
      }
      resolve(data)
    })
  })
}

var read = function* () {
  var file1 = yield readFile('1.txt')
  console.log('file1', file1.toString())
  var file2 = yield readFile('2.txt')
  console.log('file2', file2.toString())
  var file3 = yield readFile('3.txt')
  console.log('file3', file3.toString())
}

var gen = read()

gen.next().value.then(data => {
  gen.next(data).value.then(data => {
    gen.next(data).value.then(data => {
      gen.next(data)
    })
  })
})

var run = function(fn) {
  var gen = fn()
  function next(data) {
    var res = gen.next(data)
    if (res.done) return 
    res.value.then(data =>{
      next(data)
    })
  }
  next()
}

run(read)

import { connect } from 'react-redux'
import * as actions from '../actions'
import Footer from '../components/Footer'

const mapStateToProps = state => {
    return {
        filter: state.filter
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setVisibleTodos: (filter) => dispatch(actions.setFilter(filter))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

// FooterContainer
import { connect } from 'react-redux'
import * as actions from '../actions'
import Footer from '../components/Footer'
import { getFilter } from '../seletors'

const mapStateToProps = state => {
    return {
        filter: getFilter(state)
    }
}

const mapDispatchToProps = dispatch => {
    return {
        setVisibleTodos: (filter) => dispatch(actions.setFilter(filter))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

// selectors
export const getFilter = (state) => state.filter

export const getVisibleTodos = (state) => {
    const {todos, filter} = state
    switch (filter) {
        case 'all':
            return todos
        case 'completed':
            return todos.filter(todo => todo.completed)
        case 'active':
            return todos.filter(todo => !todo.completed)
        default:
            return new Error('Unknown filter:' + filter)
    }
}

import { createSelector } from 'reselect'

export const getFilter = (state) => state.filter
const getTodos = (state) => state.todos

export const getVisibleTodos = createSelector(
    [ getFilter, getTodos ],
    (filter, todos) => {
        switch (filter) {
            case 'all':
                return todos
            case 'completed':
                return todos.filter(todo => todo.completed)
            case 'active':
                return todos.filter(todo => !todo.completed)
            default:
                return new Error('Unknown filter:' + filter)
        }
    }
)

var readFile = function(filename) {
  return new Promise((resolve, reject) => {
    fs.readFile(filename, (err, data) => {
      if (err) {
        reject(err)
      }
      resolve(data)
    })
  })
}

var read = async function () {
  var file1 = await readFile('1.txt')
  console.log('file1', file1.toString())
  var file2 = await readFile('2.txt')
  console.log('file2', file2.toString())
  var file3 = await readFile('3.txt')
  console.log('file3', file3.toString())
}

read()

// 使用前页面http://localhost:3000
window.location.hash='/discover'

// 使用后页面http://localhost:3000/#/3000

// 初始值:http://localhost:3000

// http://localhost:3000/test
window.history.pushState(null, null, "test"); 

// http://localhost:3000/test/book
window.history.pushState(null, null, "test/book");

// http://localhost:3000/test/book#/hello
window.history.pushState(null, null, "#/hello");

// http://localhost:3000/test/book?name=
window.history.pushState(null, null, "?name=");

// http://localhost:3000/test/book#/hello
window.history.back()

// http://localhost:3000/test/book?name=
window.history.forward()

// <BrowserRouter>
http://example.com/about

// <HashRouter>
http://example.com/#/about

// 如果路径是/about, 则显示组件About
<Route path="/about" component={About}></Route>

<Route path="/about" component={About}></Route>
<Route path="/about/resume" component={Resume}></Route>

<Route exact path="/about" component={About}></Route>

// 点击即可跳到about界面
<Link to="/about">about</Link>
<Route exact path="/about" component={About}></Route>

<Switch>
   <Route exact path="/"  component={Main}></Route>
   <Route path="/about" component={About}></Route>
   <Route path="/topics" component={Topics}></Route>
</Switch>

<Route path="/Home/:name" component={HomePage} />

const HomePage = ({ match }) => (
  <div>
    <h1> parameter => {match.params.name}
  </div>
);

<Route path='/page' component={Page} />
const extraProps = { color: 'red' }
<Route path='/page' render={(props) => (
  <Page {...props} data={extraProps}/>
)}/>
<Route path='/page' children={(props) => (
  props.match
    ? <Page {...props}/>
    : <EmptyPage {...props}/>
)}/>

var obj = {
    name: "muyiy",
    book: {
        title: "You Don't Know JS",
        price: "45",
        b: {
            name: '小b',
            age: 18,
            next: {
                name: '小二'
            }
        }
    },
    a1: undefined,
    a2: null,
    a3: 123
}

function cloneDeep(obj) {
    var res = {}
    for(var key in obj) {
        if (obj.hasOwnProperty(key)) {
            var value = obj[key]
            if (typeof(value) == 'object') {
                res[key] = cloneDeep(value)
            } else {
                res[key] = value
            }
        }
    }
    return res
}

// 更精确的判断object函数
function isObject (obj) {
    return Object.prototype.toString.call(obj) == '[object Object]'
}

// BFS遍历对象
const cloneDeep = (obj) => {
    // q是一个队列结构，实现BFS的基础
    const q = [obj]
    while (q.length > 0) {
        const t = q.shift()
        Object.keys(t).map(key => {
            const value = t[key]
            // console.log(`${key}: ${value}`)
            if (isObject(value)) {
                q.push(value)
            } 
        })
    }
    return res
}

const cloneDeep = (obj) => {
    // res是我们的clone节点
    const res = {}
    const q = [obj]
    const map = new Map()
    // 建立对象节点与克隆节点的映射关系
    map.set(obj, res)
    while (q.length > 0) {
        const t = q.shift()
        Object.keys(t).map(key => {
            const value = t[key]
            if (isObject(value)) {
                // 建立这个属性对象与克隆节点的映射关系
                map.set(value, {})
                q.push(value)
            } 
            // 找到对应的克隆节点
            const clone = map.get(t)
            clone[key] = value
        })
    }
    return res
}

var obj = {
    a: {
       name: c
    }
    b: c
}

var a = {
    b: {}
}
a.b.c = a

const cloneDeep = (obj) => {
    // res是我们的clone节点
    const res = {}
    const q = [obj]
    const map = new Map()
    // 建立对象节点与克隆节点的映射关系
    map.set(obj, res)
    while (q.length > 0) {
        const t = q.shift()
        Object.keys(t).map(key => {
            const value = t[key]
            if (isObject(value)) {
                // 如果对象已经存在在表中，说明存在循环引用
                if (map.has(value)) {
                    map.set(t, value)
                } else {
                    // 建立这个属性对象与克隆节点的映射关系
                    map.set(value, {})
                    q.push(value)
                }
            } 
            // 找到对应的克隆节点
            const clone = map.get(t)
            clone[key] = value
        })
    }
    return res
}

import React from 'react';
import Main from './Context/Main';

// 通过该createContext静态方法创建一个Context对象
// 这个对象包含了Provider和Context
// 传值是默认值，也可以不传
const ThemeContext = React.createContext({
    background: 'red',
    color: 'black'
})

class App extends React.Component() {
    return (
        <ThemeContext.Provider value="dark">
            <Main/>
        </ThemeContext.Provider>
    );
}

class Main extends React.Component {
    render() {
        return (
            <ToolBar />
        )
    }    
}

class ToolBar extends React.Component {
    render() {
        return (
            <ThemeContext.Consumer>
                {
                    (theme) => {
                        console.log('theme', theme)
                    }
                }
            </ThemeContext.Consumer>
        )
    }
}
export default App;

class ToolBar extends React.Component {
    // 套路，后面的ThemeContext是你定义的context
    static contextType = ThemeContext
    render() {
        // 通过this.context可以拿到这个Provider提供的value值
        const theme = this.context
        return (
            <h1>
                {theme.background}
           </h1>
        )
    }
}

const Counter = React.lazy(() => import('./Counter'))

import React, {Suspense} from 'react';

<Suspense fallback={<div>Loading...</div>}>
    <Counter />
</Suspense>

class ErrorBoundary extends React.Component {
    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; 
    }
}

const MyComponent = React.memo(function MyComponent(props) {
    
});

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量。
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function Counter() {
	const [count, setCount] = React.useState(0)

	React.useEffect(() => {
		console.log(count)
	})

	return (
		<div>
			Count: {count}
			<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
			<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
		</div>
	);
}

// 在组件挂载后订阅
componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
    );
}

// 在组件销毁后取消订购
componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
        this.props.friend.id,
        this.handleStatusChange
    );
}

useEffect(() => {
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
});