nsne / blog Goto Github PK

class ReactEvent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Click');
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

class ReactEvent extends Component {

  handleClick() {
    console.log('Click');
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click Me</button>;
  }
}

class ReactEvent extends Component {

  //此函数会被绑定到ReactEvent类的实例
  handleClick = () => {
    console.log('Click');
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

class ReactEvent extends Component {

  handleClick() {
    console.log('Click');
  }

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

//仅作为示例代码，不遵循常用代码规范
//子组件
class Button extends React.PureComponent {

  render() {
    console.log('================')
    return (
      <button onClick={this.props.handleClick}>hahaha</button>
    )
  }

}


//父组件
class ButtonList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: -1,
      list: [1, 2, 3, 4]
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    console.log('Click');
  }
  
  onStateChange = () => {
    this.setState({
      index: 1
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.onStateChange}>stateChange</button>   
        {
          this.state.list.map(item => <Button handleClick={this.handleClick}/>)
        }
      </div>
    )
  }
}


ReactDOM.render(
    <ButtonList />, document.getElementById('root')
);

  //render中使用箭头函数
  {
    this.state.list.map(item => (
      <Button onClick={() => this.handleClick(item.id)}/>
    ))
  }

  //render中使用bind
  {
    this.state.list.map(item => (
      <Button onClick={this.handleClick.bind(this, item.id)}/>
    ))
  }

  //handleClick中通过e.target.dataset.id获取
  {
    this.state.list.map(item => (
      <Button data-id={item.id} onClick={this.handleClick}/>
    ))
  }

//子组件
class Button extends React.PureComponent {

  handleClick = () => {
    this.props.handleClick(this.props.item);
  }

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


//父组件
class ButtonList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [1, 2, 3, 4]
    };
  }
  
  handleClick = (item) => {
    console.log('Click', item);
  }
  
  render() {
    const { list=[] } = this.state;

    return (
      <div>
        {
          list.map(item => <Button handleClick={this.handleClick} item={item}/>)
        }
      </div>
    )
  }
}

ReactDOM.render(
    <ButtonList />, document.getElementById('root')
);

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

var Greeting = React.createClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}  

const debounce = (func, timeout, immediate = false) => {
  let timer = null;
  return function (...args) {
    if (!timer && immediate) {
      func.apply(this, args);
    }
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  }
}

const throttle = (func, timeout) => {
  let timer = null;
  return function (...args) {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null;
        func.apply(this, args);
      }, timeout);
    }
  }
}

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

// This component is loaded dynamically
const SomeComponent = React.lazy(() => import('./SomeComponent'));

// This component is loaded dynamically
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Displays <Spinner> until OtherComponent loads
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

render(
  <App>
    <Profiler id="Navigation" onRender={callback}>
      <Navigation {...props} />
    </Profiler>
    <Main {...props} />
  </App>
);

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  // Aggregate or log render timings...
}

function bubbleSort(arr) {
  const len = arr.length;
  for (let i = 0; i < len; i++) {
    // 每次把最大值冒泡到最后
    for (let j = 1; j < len - i; j++) {
      if (arr[j - 1] > arr[j]) {
        [arr[j - 1], arr[j]] = [arr[j], arr[j - 1]];
      }
    }
  }
  return arr;
}

function quickSort(arr) {
  const sort = (L, R) => {
    if (L >= R) return;
    let l = L;
    let r = R;
    // 选择一个基准值，把小于它的，放在左边，大于它的，放在右边
    // 拆分后的两端继续这样做
    const pivot = arr[l];
    while (l < r) {
      while (l < r && arr[r] > pivot) r--;
      if (l < r) {
        arr[l] = arr[r];
      }
      while (l < r && arr[l] < pivot) l++;
      if (l < r) {
        arr[r] = arr[l];
      }
    }
    arr[l] = pivot;
    sort(L, r - 1);
    sort(r + 1, R);
  };
  sort(0, arr.length - 1);
  return arr;
}

function mergeSort(arr) {
  const merge = (sortV1, sortV2) => {
    let sortValue = [];
    let i = 0,
      j = 0;
    while (i < sortV1.length && j < sortV2.length) {
      if (sortV1[i] > sortV2[j]) {
        sortValue.push(sortV2[j]);
        j++;
      } else {
        sortValue.push(sortV1[i]);
        i++;
      }
    }
    if (i < sortV1.length) {
      sortValue = sortValue.concat(sortV1.slice(i, sortV1.length));
    } else if (j < sortV2.length) {
      sortValue = sortValue.concat(sortV2.slice(j, sortV2.length));
    }
    return sortValue;
  };

  const sort = (arr) => {
    if (arr.length === 1) return arr;
    let mid = Math.floor(arr.length / 2);
    let v1 = arr.slice(0, mid);
    let v2 = arr.slice(mid, arr.length);
    const sortV1 = sort(v1);
    const sortV2 = sort(v2);
    return merge(sortV1, sortV2);
  };

  return sort(arr);
}

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";

function MyPromise(excutor){
  // 初始状态为 pending
  this.status = PENDING;
  // 成功的值
  this.value = undefined;
  // 失败的原因
  this.reason = undefined;
  // then 的回调函数集合，后面会用到
  this.fulfilledCallback = [];
  this.rejectedCallback = [];

  const resolve = (value) => {
    if (this.status === PENDING) {
      this.status = FULFILLED;
      this.value = value;
      // 状态变更后执行 then 的回调函数
      this.fulfilledCallback.forEach(fn => fn(value))
    }
  }

  const reject = (reason) => {
    if (this.status === PENDING) {
      this.status = REJECTED;
      this.reason = reason;
      this.rejectedCallback.forEach(fn => fn(reason))
    }
  }

  try {
    excutor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

MyPromise.prototype.then = function(onResolve, onReject){

  onResolve = onResolve === undefined ? value => value : onResolve,
  onReject = onReject === undefined ? error => { throw error } : onReject;

  return new MyPromise((resolve, reject) => {

    function handle(func, value){
      try {
        const result = func(value);
        // 如果返回一个 Promise
        if (result instanceof MyPromise) {
            result.then(resolve, reject);
        } else {
          resolve(result);
        }
      } catch (err) {
          reject(err);
      }
    }

    if (this.status === FULFILLED) {
      queueMicrotask(() => {
        handle(onResolve, this.value);
      });
    }

    if (this.status === REJECTED) {
      queueMicrotask(() => {
        handle(onReject, this.reason);
      });
    }

     // 状态为 pending，将回调函数保存到前面定义的函数集合中
    if (this.status === PENDING) {
      // 保存到 fulfilledCallback
      this.fulfilledCallback.push(value => {
        queueMicrotask(() => {
          handle(onResolve, value);
        });
      });

      // 保存到 rejectedCallback
      this.rejectedCallback.push(reason => {
        queueMicrotask(() => {
          handle(onReject, reason)
        });
      });
    }
  })
};

  MyPromise.prototype.catch = function (onReject) {
    return this.then(undefined, onReject);
  };

  MyPromise.prototype.finally = function (cb) {
    return this.then(
      (value) => MyPromise.resolve(cb()).then(() => value),
      (reason) =>
        MyPromise.resolve(cb()).then(() => {
          throw reason;
        })
    );
  };

  MyPromise.resolve = function (value) {
    // 如果参数是MyPromise实例，直接返回这个实例
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve) => resolve(value));
  };

  MyPromise.reject = function (value) {
    // 如果参数是MyPromise实例，直接返回这个实例
    if (value instanceof MyPromise) return value;
    return new MyPromise((resolve, reject) => reject(value));
  };

  MyPromise.race = function (promises) {
    return new Promise((resolve, reject) => {
      promises.forEach((p) => {
        MyPromise.resolve(p).then(resolve, reject);
      });
    });
  };

  MyPromise.all = function (promises) {
    let result = [];
    const len = promises.length;
    let count = 0;
    return new MyPromise((resolve, reject) => {
      promises.forEach((p, index) => {
        MyPromise.resolve(p).then(
          (res) => {
            result[index] = res;
            count++;
            if (count === len) {
              resolve(result);
            }
          },
          (error) => {
            reject(error);
          }
        );
      });
    });
  };

  MyPromise.allSettled = function (promises) {
    let result = [];
    const len = promises.length;
    let count = 0;
    return new MyPromise((resolve, reject) => {
      promises.forEach((p, index) => {
        MyPromise.resolve(p).then(
          (value) => {
            result[index] = {
              status: FULFILLED,
              value,
            };
            count++;
            if (count === len) {
              resolve(result);
            }
          },
          (reason) => {
            result[index] = {
              status: REJECTED,
              reason,
            };
            count++;
            if (count === len) {
              resolve(result);
            }
          }
        );
      });
    });
  };

if (typeof window.queueMicrotask !== "function") {
  window.queueMicrotask = function (callback) {
    Promise.resolve()
      .then(callback)
      .catch(e => setTimeout(() => { throw e; }));
  };
}

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
  // ...
  components: {
    'AsyncComponent': () => import('./AsyncComponent')
  }
})

// 如果不是default导出的模块
new Vue({
  // ...
  components: {
    'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
  }
})

const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
  routes: [
    { path: '/test', component: AsyncComponent}
  ]
})

export {
    createStore,             //创建一个state用来存储状态树
    combineReducers,   //合并reducer
    bindActionCreators,  //将dispatch和action结合
    applyMiddleware,     //调度中间件来增强store，例如中间件redux-thunk等
    compose              //从右向左组合多个函数, compose(f, g, h)会返回(...args) => f(g(h(...args)))
}

    export var ActionTypes = {
        INIT: '@@redux/INIT'
    }
   //首先定义了一个action类型，我们知道更新state的唯一方法就是dispatch一个action，这个action是用
   // 来初始化state的，后面会用到它

//接收三个参数
//reducer为function。当dispatch一个action时，此函数接收action来更新state
//preloadState初始化State
//enhancer 为function。用来增强store, Redux 定义有applyMiddleware来增强store，后面会
//单独讲applyMiddleware

export default function createStore(reducer, preloadedState, enhancer) {
    if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
        //如果只传了两个参数，并且第二个参数为函数，第二个参数会被当作enhancer
        enhancer = preloadedState
        preloadedState = undefined
    }
  
    if (typeof enhancer !== 'undefined') {
        if (typeof enhancer !== 'function') {
            //校验enhancer是否为函数，如果不是函数则抛出异常
            throw new Error('Expected the enhancer to be a function.')
        }
        //如果enhancer存在且为函数，那么则返回如下调用，如果enhancer为applyMiddleware，那么调用则
        //是applyMiddleware(createStore)(reducer, preloadedState)。后面讲applyMiddleware再详细讲。
        return enhancer(createStore)(reducer, preloadedState)
    }

    if (typeof reducer !== 'function') {
        //校验reducer是否为函数
        throw new Error('Expected the reducer to be a function.')
    }

    var currentReducer = reducer
    //得到reducer

    var currentState = preloadedState
    //得到初始init，没有传递则为undefined

    var currentListeners = []
    //定义一个数组用来存放listeners。就是一个函数数组，当state发生改变时，会循环执行这个数组里面的函数

    var nextListeners = currentListeners
    //用来存储下一次的listeners数组。为什么要有这个listeners数组呢？因为当state发生改变时，我们根据
    //上面的currentListeners来循环执行函数，但是在这执行这些函数时，函数内部可能取消或者添加订阅
    //（state改变时，添加或者取消执行函数），这时如果直接操作currentListeners ，相当于在循环
    //内部修改循环条件，执行瞬间就乱套了，有没有啊，有没有

    var isDispatching = false
    //reducer函数是否正在执行的标识

    function ensureCanMutateNextListeners() {
        //拷贝currentListeners一份为nextListeners,这样nextListeners的改变不会引起currentListeners的改变
        //（上面解释过原因啦）
    }

    function dispatch() {
        //触发action去执行reducer，更新state
        .....
    }

    function subscribe() {
        //接收一个函数参数，订阅state的改变。当state改变时会执行这个函数
        ....
    }

    function getState() {
        //获取state树
        ....
    }

    function replaceReducer() {
        //替换reducer
        ....
    }

    function observable() {
        //没用，不解释（后面有解释）
        ......
    }


    dispatch({ type: ActionTypes.INIT })
    //执行dispatch函数，初始化state

    return {
        //真正的返回，执行createStore其实返回的就是这些东东
        dispatch,       //触发action去执行reducer，更新state
        subscribe,     //订阅state改变，state改变时会执行subscribe的参数（自己定义的一个函数）
        getState,      //获取state树
        replaceReducer,       //替换reducer
        [$$observable]: observable         
        //redux内部用的，对我们来说没用（非要深究它写这是干嘛的？咋跟
        //我一样死脑筋呢，都说了没用啦。算了，还是告诉你把，就是内部用的，在测试代码中会用到，感兴
        //趣的可以去test目录下查看）
    }
}

dispatch({ type: ActionTypes.INIT })

  function dispatch(action) {
    //校验action参数，必须为一个纯粹的对象。这也说明了，我们不能直接在redux做异步请求，而是需要
    //使用applyMiddleware去应用一些中间件。比如redux-thunk等
    if (!isPlainObject(action)) {
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }
    //同样是校验参数，不解释，相信都能看懂
    if (typeof action.type === 'undefined') {
      throw new Error(
        'Actions may not have an undefined "type" property. ' +
        'Have you misspelled a constant?'
      )
    }
    //判断是否正在执行reducers函数，如果正在执行，此action不会触发，那有人就问题了，那是不是我
    //的dispatch不会起作用，导致state没有更新，数据是错误的？ 答案是state是不会有错。因为redux本
    //身整个更新state的过程是同步的，从dipatch——>reducers——>state。所以这段代码意在你定义的
    //reducers函数中不允许调用dispatch
    if (isDispatching) {
      throw new Error('Reducers may not dispatch actions.')
    }

    try {
      //设置标识为，并且执行currentReducer，还记得吗？这个我们通过参数获取到的一个函数，往往是我
      //们调用combineReducers返回，combineReducers我们后面解析
      isDispatching = true
      //调用reducers函数
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }
    //调用所有订阅state改变的函数，这些函数就可以通过getState函数获取到最新的state值。订阅的函数
    //从哪里来呢，从subscribe中来， 我们后面来解析subscribe和getState
    var listeners = currentListeners = nextListeners
    for (var i = 0; i < listeners.length; i++) {
      listeners[i]()
    }

    return action
  }

[f1, f2, f3, f4]

function compose(...funcs) {
  if(funcs.length === 0) {
    return args => args;
  }
  return funcs.reduce((acc, current) => {
    return (...args) => acc(current(...args));
  });
}

function compose(...funcs) {
  if(funcs.length === 0) {
    return args => args;
  }
  return funcs.reduce((acc, current) => {
    return (...args) => current(acc(...args));
  });
}

function add(a, b = 1) {
  return a + b;  
}
 
function square(a) {
  return a*a;
}
 
function plusOne(a) {
  return a + 1;
}
 
function compose(...funcs) {
  if(funcs.length === 0) {
    return args => args;
  }
  return funcs.reduce((acc, current) => {
    return (...args) => acc(current(...args));
  });
}
 
var addSquareAndPlusOne = compose(add, square, plusOne);
 
addSquareAndPlusOne(1, 2);