import React, {createContext, useContext, useReducer} from 'react';

const _STATE = createContext();
const _DISPATCH = createContext();

function App (){
    const initStatus = {
        count: 0
    };

    const reducer = (state, action) => {
        switch (action.type) {
            case 'add':
                return {
                    ...state, count: state.count + 1
                };
            case 'reduce':
                return {
                    ...state, count: state.count - 1
                };
            default:
                throw 'Error';
        }
    }

    const [state, dispatch] = useReducer(reducer, initStatus);       //传入一个reducer函数和初始值

    return <React.Fragment>
            <_STATE.Provider value={state}>
                <_DISPATCH.Provider value={dispatch}>
                    <Child />
                </_DISPATCH.Provider>
            </_STATE.Provider>
        </React.Fragment>
}
......

......
const creator = (type, payload, error) => {
  return {
      type: type,
      payload,
      error
  }
}
function Child(){
  const state = useContext(_STATE);   //获取共享的上下文
  const dispatch = useContext(_DISPATCH);

  return <React.Fragment>
            <div>{state.count}</div>
            <button onClick = {() => dispatch(creator("add"))}>增加</button>
            <button onClick = {() => dispatch(creator("reduce"))}>减少</button>
        </React.Fragment>
}
......

useEffect(() => {
    //do something
}, []);
//因为hooks函数每一次的render产生的函数和变量都是不一样的，所以当useEffect依赖某个变量时需要在第二个参数传入

//index.js
import 'core-js/es';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
......

NativeModules.AppInfo.getVersion((version) => {
    console.log(version);
    //output 1.1.0
});

......
(async () => {
  try {
    const permissions = [
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
    ];

    const granteds = await PermissionsAndroid.requestMultiple(permissions);
    if (granteds["android.permission.ACCESS_FINE_LOCATION"] === "granted" && granteds["android.permission.READ_EXTERNAL_STORAGE"] === "granted" && granteds["android.permission.WRITE_EXTERNAL_STORAGE"] === "granted") {
    } else {
      ToastAndroid.show('授权被拒绝', ToastAndroid.LONG)
    }
  } catch (err) {
    ToastAndroid.show(err.toString(), ToastAndroid.LONG);
  }
})();

import RNFS from 'react-native-fs';

const downloadDest = `${RNFS.DownloadDirectoryPath}/app.apk`;    

const options = {
  fromUrl: UPDATEURL,    //更新包的地址
  toFile: downloadDest,  //下载后保存的地址
  background: true,
  begin: (res) => {
  }
};
const ret = RNFS.downloadFile(options);
ret.promise.then(res => {
    // 下载成功
}).catch(err => {
  ToastAndroid.show(err, ToastAndroid.LONG);
});

......
ret.promise.then(res => {
    // 下载成功
  NativeModules.Update.installApp(downloadDest, (res) => {
      // 安装成功
  });
}).catch(err => {
  ToastAndroid.show(err, ToastAndroid.LONG);
});
......

const socket = dgram.createSocket('udp4');

socket.on('error', (err) => {
    socket.close();
});

socket.bind(1900, () => {
    socket.setMulticastTTL(128);
    socket.addMembership('239.255.255.250');
    socket.setMulticastLoopback(true);

    const msg = toByteArray('M-SEARCH * HTTP/1.1\r\nHOST: 239.255.255.250:1900\r\nMAN:"ssdp:discover"\r\nMX:5\r\nST: upnp:rootdevice\r\n');

    socket.send(msg, 0, msg.length, 1900, '239.255.255.250', function (error, bytes) {
    });
});

socket.on('message', function(data, rinfo) {
    socket.close();

    var str = String.fromCharCode.apply(null, new Uint8Array(data));
    const ClearBr = (key) => { 
        key = key.replace(/<\/?.+?>/g,""); 
        key = key.replace(/[\r\n]/g, ""); 
        return key; 
    } 

    const xmlAddress = ClearBr(str).match(/LOCATION: (\S*).xml/)[1] + ".xml";

    fetch(xmlAddress).then(res => {
        return res.text();
    }).then(res => {
        console.log(res);
        const modelName = res.match(/<modelName>(\S*)<\/modelName>/);   //路由器型号
    });
});

function toByteArray (obj){
    var uint = new Uint8Array(obj.length);
    for (var i = 0, l = obj.length; i < l; i++){
        uint[i] = obj.charCodeAt(i);
    }
    return new Uint8Array(uint);
}

var A = () => {
     return new Promise(function(resolve, reject){
              setTimeout(function(){
                    resolve("success");
              },3000);
    })
}

var B = () => {
     return new Promise(function(resolve, reject){
              setTimeout(function(){
                    resolve("done");
                    //reject("error");
              },1000);
    })
}

//Promise + then
A().then(res => {
        if (res == "success") {
            return B();
        }else{
            console.log("error");
        }
    })
    .then(res => {
        console.log(res);
    })
    .catch(error => {
        console.log(error);
    });

//async
(async () => {
    try {
        const a = await A();
        if (a == "success") {
            const b = await B();
            console.log(b);
        }else{
            console.log("error");
        }
    } catch (error) {
        console.log(error);
    }
})();

// webpack.config.js
module.exports = {
    entry:{
        main: __dirname + "/index.js"
    },
    output:{
        path: __dirname + "/dist",
        filename: "index.bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }
}

//gulpfile.js
var gulp = require('gulp'),
  babelify = require('babelify'),
  notify = require('gulp-notify'),     //按需使用
  browserify = require('browserify'),
  buffer = require('gulp-buffer'),   //vinyl-buffer也可
  uglify = require('gulp-uglify'),
  source = require('vinyl-source-stream');   //vinyl-source-buffer  按需使用

  gulp.task('default', function () {
    browserify('./index.js')
    .transform("babelify", {plugins: ["transform-runtime"],presets: [["env"]]})     //babel处理
    .bundle()       //处理模块依赖
    .pipe(source("index.js"))      //转换为vinyl文件对象
    .pipe(buffer())          //转换为buffer以便进行代码压缩
    .pipe(uglify())
    .pipe(gulp.dest('./dist'))
    .pipe(notify({
        message: 'javascript compile complete'
    }));
});

//gulpfile.js
var gulp = require('gulp'),
  babel = require('gulp-babel'),
  notify = require('gulp-notify'),
  browserify = require('gulp-browserify');

  gulp.task('default', function () {
   gulp.src('./index.js')
       .pipe(babel())
       .pipe(browserify())
       .pipe(gulp.dest('./dist'))
       .pipe(notify({
        message: 'javascript compile complete'
      }));
});

// babel 配置同webpack篇

//jq
$("#a .b");

//Native
document.querySelectorAll("#a .b");

 //jq
 $(selector).append(html);
 //prepend
 //before
 //after

 //Native
 document.querySelectorAll(selector).insertAdjacentHTML("beforeend", html);
//beforebegin 开始标签之前 before
//afterbegin  开始标签之后 prepend
//beforeend  结束标签之前 append
//afterbegin  结束标签之后 after

 //jq
 $(selector).addClass(className);
 //hasClass
 //removeClass
 //toggleClass

 //Native
 document.querySelectorAll(selector).classList.add(className, className, className...);
//contains(className) 检测是否存在
//removeClass(className, className, className...) 删除
//toggle(className, true|false) 切换

//jq
$.ajax({
    //.................
});

//Native
(async () => {
 try{
    const res = await req(url, {headers: {Accept: "text/html"}});
    if(......){
       .......
    }
  } catch {
  
  }
}());

function req(url, data) {    //自己封装，仅供参考
  let sendurl = url;
  let setting = {
      method: data.type ? data.type : "get",
      headers: new Headers({
          "Accept": "application/json, text/javascript, */*; q=0.01",
          "Pragma": "no-cache",
          "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
          "X-Requested-With": "XMLHttpRequest"
  }),
  credentials: "include"
};

if(data.headers){
    const headers = setting.headers;
    for(let attr in data.headers){
        if(headers.has(attr)){
            headers.set(attr, data.headers[attr]);
        } else {
            headers.append(attr, data.headers[attr]);
        }
    }
}

if (setting.method == "post") {
    setting.body = data.param ? paramData(data.param) : "";
} else {
    sendurl = sendurl + (data.param ? "?" + paramData(data.param) : "");
}

return fetch(sendurl, setting).then((response) => {
      if (response.status >= 200 && response.status < 300) {
        return response;
      } else {
          throw new Error(response.statusText);
      }
   }).then((response) => {
     const accept = setting.headers.get("accept");
     if(accept.includes("/json")){
        return response.json();
     } else if(accept.includes("/html")){
        return response.text();
     }
  });
}

const fs = require('fs');
const url = require('url');
const readline = require('readline');

console.time('cost-time');
const rl = readline.createInterface({
    input: fs.createReadStream('路径马赛克/20200221-access.log')
});

let arr = [];

rl.on('line', (line) => {
    //你自己的业务逻辑
});

rl.on('close', () => {
    console.timeEnd('cost-time');    //假吧意思看个耗时
});

{ 
  test: /\.css$/,
  use: [
       {
         loader: "style-loader",
       },
       {
         loader: "css-loader",
         options: {
              importLoaders: 1
          }
       }
    ],
  exclude: /app/,    //这里要将自己的排除在规则外
 }

{ 
  test: /\.css$/,
  use: [
       {
         loader: "style-loader",
       },
       {
         loader: "css-loader",
       }
    ],
  exclude: /node_modules/,    //这里要将Antd的样式排除
 }