import React, { useContext, useReducer, useEffect } from "react";
// step01 将数据集中在store里
const store = {
  user: null,
  books: null,
  movies: null
}
// step02 将所有操作集中在 reducer里
const reducer = (state, action) => {
  switch (action.type) {
    case 'setUser':
      return { ...state, user: action.user }
    case 'setBooks':
      return { ...state, books: action.books }
    case 'setMovies':
      return { ...state, movies: action.movies }
    default:
      throw new Error('no match action')
  }
};

// step03 创建 Context
const Context = React.createContext(null)

function ReducerDemo1() {
  // step04 创建对数据的 读/写 API
  const [state, dispatch] = useReducer(reducer, store)
  return (
    // step05 将 step04的 读写api放到 Context提供的组件上
    // step06 Context.Provider  将 Context 提供给所有组件
    <Context.Provider value={{ state, dispatch }}>
      <User />
      <hr />
      <Books />
      <Movies />
    </Context.Provider>
  );
}

// step07 各个组件用 useContext 获取读写API
function User() {
  const { state, dispatch } = useContext(Context);
  useEffect(() => {
    ajax("/user").then(user => {
      dispatch({ type: "setUser", user: user });
    });
  }, []);
  return (
    <div>
      <h1>个人信息</h1>
      <div>name: {state.user ? state.user.name : ""}</div>
    </div>
  );
}

function Books() {
  const { state, dispatch } = useContext(Context);
  useEffect(() => {
    ajax("/books").then(books => {
      dispatch({ type: "setBooks", books: books });
    });
  }, []);
  return (
    <div>
      <h1>我的书籍</h1>
      <ol>
        {state.books ? state.books.map(book => <li key={book.id}>{book.name}</li>) : "加载中"}
      </ol>
    </div>
  );
}

function Movies() {
  const { state, dispatch } = useContext(Context);
  useEffect(() => {
    ajax("/movies").then(movies => {
      dispatch({ type: "setMovies", movies: movies });
    });
  }, []);
  return (
    <div>
      <h1>我的电影</h1>
      <ol>
        {state.movies
          ? state.movies.map(movie => <li key={movie.id}>{movie.name}</li>)
          : "加载中"}
      </ol>
    </div>
  );
}

export default ReducerDemo1;

// 帮助函数

// 假 ajax
// 两秒钟后，根据 path 返回一个对象，必定成功不会失败
function ajax(path) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (path === "/user") {
        resolve({
          id: 1,
          name: "hjx"
        });
      } else if (path === "/books") {
        resolve([
          {
            id: 1,
            name: "JavaScript 高级程序设计"
          },
          {
            id: 2,
            name: "JavaScript 精粹"
          }
        ]);
      } else if (path === "/movies") {
        resolve([
          {
            id: 1,
            name: "爱在黎明破晓前"
          },
          {
            id: 2,
            name: "恋恋笔记本"
          }
        ]);
      }
    }, 2000);
  });
}

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

const C = createContext(null);

function UseContextDemo1() {
  const [n, setN] = useState(0)
  return (
    <C.Provider value={{ n, setN }}>
      <div className="UseContextDemo1">
        <Baba />
      </div>
    </C.Provider>
  )
}

function Baba() {
  return (
    <div>
      我是爸爸
      <Child />
    </div>
  )
}

function Child() {
  const { n, setN } = useContext(C);
  const onClick = () => {
    setN(i => i + 1)
  }
  return (
    <div>
      我是儿子，我得到n:{n}
      <button onClick={onClick}>+1</button>
    </div>
  )
}
export default UseContextDemo1

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

function UseEffectDemo1() {
  return (
    <div className="demo1">
      <Demo1 />
      <Demo2 />
      <Demo3 />
      <Demo4 />
      <Demo5 />
      <Demo6 />
      <Demo7 />
    </div>
  )
}


function Demo1() {
  const [n, setN] = useState(0)

  useEffect(() => {
    // 任何一个变了变量变了都执行
    // 第一次 和 第二三四 。。。 次
    console.log('demo1:第一次 和 第二三四 。。。 次,任何一个变量变了都执行')
  })

  const onClick = () => {
    setN(i => i + 1)
  }
  return (
    <div className="demo1">
      <h1>useEffect不传递第二个参数， 第一二三。。。次执行,任何一个变量变了都执行</h1>
      n:{n}
      <br />
      <button onClick={onClick}>+1</button>
    </div>
  )
}

function Demo2() {
  const [n, setN] = useState(0)
  useEffect(() => {
    // n更新之后
    console.log('demo2:n更新之后')
  }, [n])

  const onClick = () => {
    setN(i => i + 1)
  }
  return (
    <div className="demo2">
      <h1>useEffect传递第二个参数[n]， 第一次执行,以及n变了执行</h1>
      n:{n}
      <br />
      <button onClick={onClick}>+1</button>
    </div>
  )
}


function Demo3() {
  const [x, setX] = useState(0)
  const [y, setY] = useState(0)
  useEffect(() => {
    // x更新之后,
    console.log('demo3:第一次执行，以及x更新之后才变，y改变不会触发effect')
  }, [x])

  const onClickX = () => {
    setX(i => i + 1)
  }
  const onClickY = () => {
    setY(i => i + 1)
  }
  return (
    <div className="demo2">
      <h1>useEffect传递第二个参数[x]，第一次执行，以及x更新之后才变，y改变不会触发effect</h1>
      x:{x}
      <br />
      y:{y}
      <br />
      <button onClick={onClickX}>x+1</button>
      <button onClick={onClickY}>y+1</button>
    </div>
  )
}

function Demo4() {
  const initValue = 0;
  const [z, setZ] = useState(initValue)
  useEffect(() => {
    // 跳过第一次
    if (z !== initValue) {
      // 跳过第一次
      console.log('demo4:通过if(z!== initValue)判断，跳过第一次，z修改后执行')
    }
  }, [z])

  const onClick = () => {
    setZ(i => i + 1)
  }
  return (
    <div className="demo2">
      z:{z}
      <br />
      <button onClick={onClick}>z+1</button>
    </div>
  )
}

function Demo5() {
  const [z, setZ] = useState(0)
  useEffect(() => {
    console.log('demo5:useEffect 第二个参数为空数组[],只执行一次')
  }, []);

  const onClick = () => {
    setZ(i => i + 1)
  }
  return (
    <div className="demo5">
      <h1>demo5:useEffect 第二个参数为空数组[],只执行一次</h1>
      z:{z}
      <br />
      <button onClick={onClick}>z+1</button>
    </div>
  )
}

function Demo6() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('demo6:useEffect 移除时执行 return里写一个函数')
    }, 3000)
    return () => {
      window.clearInterval(id);
      console.log('demo6:组件销毁的时候执行')
    }
  }, []);

  return (
    <div className="demo6">
      <h1>demo6:useEffect 移除时执行操作 return一个函数进行操作</h1>
    </div>
  )
}


function Demo7() {
  useEffect(() => {
    console.log('demo7:1')
  }, []);
  useEffect(() => {
    console.log('demo7:2')
  }, []);

  return (
    <div className="demo7">
      <h1>demo7:多个useEffect 按顺序执行</h1>
      <br />
    </div>
  )
}

export default UseEffectDemo1

function Demo1() {
  const [n, setN] = useState(0)
  useEffect(() => {
    document.querySelector('#x').innerText = `n:1000`
  }, [n])
  return (
    <div className="demo1">
      <h1>useEffect</h1>
      <div id="x">n:{n}</div>
    </div>
  )

function Demo2() {
  const [n, setN] = useState(0)
  useLayoutEffect(() => {
    document.querySelector('#x2').innerText = `n:1000`
  }, [n])
  return (
    <div className="demo2">
      <h1>useEffect</h1>
      <div id="x2">n:{n}</div>
    </div>
  )
}

function Demo3() {
  const [x, setX] = useState(0)
  const time = useRef(null)
  const onClickX = () => {
    setX(i => i + 1)
    time.current = performance.now()
  }

  useEffect(() => {
    if (time.current) {
      console.log('demo3:' + (performance.now() - time.current))
    }
  }, [x])

  return (
    <div className="demo3">
      <h1>useEffect的更新UI时间更长</h1>
      x:{x}
      <br />
      <button onClick={onClickX}>x+1</button>
    </div>
  )
}

function Demo4() {
  const [x, setX] = useState(0)
  const time = useRef(null)

  const onClickX = () => {
    setX(i => i + 1)
    time.current = performance.now()
  }

  useLayoutEffect(() => {
    if (time.current) {
      console.log('demo4:' + (performance.now() - time.current))
    }
  }, [x])

  return (
    <div className="demo4">
      <h1>useLayoutEffect的更新UI时间更短</h1>
      x:{x}
      <br />
      <button onClick={onClickX}>x+1</button>
    </div>
  )
}

// 使用
const [n, setN] = useState(0);
const [user, setUser] = useState({name:'f'});

const [user, setUser] = useState({name:'f',age:19});

onClick(){
  setUser({
    age:20
  })
}

// 这样操作之后， name属性就没了

你只能这样

onClick(){
  setUser({
    ...user,
    age:20
  })
}

const [user, setUser] = useState({name:'f',age:19});

onClick(){
  user.name = 'xxx' // 千万不要改之前的对象
  setUser(user)
  // 这样也不会触发更新
}

// 这样每次 js解析 都会 算一下 18+18
const [user,setUser] = useState({name:'aaa',age:18+18}) 

对比这样的好处是 函数只会执行一次，减少多余的计算过程
const [user,setUser] = useState(()=>{
  return ({name:'aaa',age:18+18})
})


// 基本用不到

const [n, setN] = useState(0);

onClick(){
  setN(n+1) // n不会变
  setN(n+2) // 只有最后一次会生效
  // n = 2
}


// 多次操作n的正确姿势
onClick(){
  setN(x => x+1) 
  setN(y => y+1) 
  // n = 2
}

import React, { useState, useReducer } from "react";
import ReactDOM from "react-dom";

// 1创建初始值
const initial = {
  n: 0
};

// 2创建所有 reducer
const reducer = (state, action) => {
  if (action.type === "add") {
    return { n: state.n + action.number };
  } else if (action.type === "multi") {
    return { n: state.n * 2 };
  } else {
    throw new Error("unknown type");
  }
};

function App() {
  const [state, dispatch] = useReducer(reducer, initial);
  const { n } = state;
  const onClick = () => {
    dispatch({ type: "add", number: 1 });
  };
  const onClick2 = () => {
    dispatch({ type: "add", number: 2 });
  };
  return (
    <div className="App">
      <h1>n: {n}</h1>
      <button onClick={onClick}>+1</button>
      <button onClick={onClick2}>+2</button>
    </div>
  );
}

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

import React, { useReducer } from "react";
import ReactDOM from "react-dom";

const initFormData = {
  name: "",
  age: 18,
  nationality: "汉族"
};

function reducer(state, action) {
  switch (action.type) {
    case "patch":
      return { ...state, ...action.formData };
    case "reset":
      return initFormData;
    default:
      throw new Error();
  }
}

function App() {
  const [formData, dispatch] = useReducer(reducer, initFormData);
  // const patch = (key, value)=>{
  //   dispatch({ type: "patch", formData: { [key]: value } })
  // }
  const onSubmit = () => {};
  const onReset = () => {
    dispatch({ type: "reset" });
  };
  return (
    <form onSubmit={onSubmit} onReset={onReset}>
      <div>
        <label>
          姓名
          <input
            value={formData.name}
            onChange={(e) =>
              dispatch({ type: "patch", formData: { name: e.target.value } })
            }
          />
        </label>
      </div>
      <div>
        <label>
          年龄
          <input
            value={formData.age}
            onChange={(e) =>
              dispatch({ type: "patch", formData: { age: e.target.value } })
            }
          />
        </label>
      </div>
      <div>
        <label>
          民族
          <input
            value={formData.nationality}
            onChange={(e) =>
              dispatch({
                type: "patch",
                formData: { nationality: e.target.value }
              })
            }
          />
        </label>
      </div>
      <div>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
      </div>
      <hr />
      {JSON.stringify(formData)}
    </form>
  );
}

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

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  console.log("app 运行了");
  const [n, setN] = useState(0);
  console.log("n:" + n);
  return (
    <div className="App">
      <h1>{n}</h1>
      <button onClick={() => setN(n + 1)}>onAdd</button>
    </div>
  );
}

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

import React from "react";
import ReactDOM from "react-dom";

let _state;
const myUseState = (initValue) => {
  console.log("myUseState run");
  _state = _state === undefined ? initValue : _state;
  const setState = (newValue) => {
    _state = newValue;
    render();
  };
  return [_state, setState];
};
function render() {
  ReactDOM.render(<App />, document.getElementById("root"));
}

function App() {
  console.log("app 运行了");
  const [n, setN] = myUseState(0);
  console.log("n:" + n);
  return (
    <div className="App">
      <h1>{n}</h1>
      <button onClick={() => setN(n + 1)}>onAddN</button>
    </div>
  );
}
render();

import React from "react";
import ReactDOM from "react-dom";

let _state = [];
let index = 0;
const myUseState = (initValue) => {
  const currentIndex = index;
  _state[currentIndex] =
    _state[currentIndex] === undefined ? initValue : _state[currentIndex];
  const setState = (newValue) => {
    _state[currentIndex] = newValue;
    render();
  };
  index += 1;
  return [_state[currentIndex], setState];
};
function render() {
  // 每次重新渲染的时候 重置 index
  index = 0;
  ReactDOM.render(<App />, document.getElementById("root"));
}

function App() {
  console.log("app 运行了");
  const [n, setN] = myUseState(0);
  const [m, setM] = myUseState(0);
  console.log("n:" + n);
  return (
    <div className="App">
      <h1>n:{n}</h1>
      <button onClick={() => setN(n + 1)}>onAddN</button>
      <h1>m:{m}</h1>
      <button onClick={() => setM(m + 1)}>onAddM</button>
    </div>
  );
}

render();

function App() {
  console.log("app 运行了");
  const [n, setN] = myUseState(0);
  let m,setM
  if(n%2 === 1){
    [m, setM] = myUseState(0);
  }
  console.log("n:" + n);
  return (
    <div className="App">
      <h1>n:{n}</h1>
      <button onClick={() => setN(n + 1)}>onAddN</button>
      <h1>m:{m}</h1>
      <button onClick={() => setM(m + 1)}>onAddM</button>
    </div>
  );
}

开始的时候 render(<App/>)

生成虚拟dom
vnode  = {
  tag:'div',
  type:'App'
  _state:[],
  index:0
}

第一次渲染的时候 触发 useState(0)
渲染 0
第二次 onAdd的时候
产生新的 vnode2 同时 测试的 n = n+1

diff算法 分析差异 ，patch打补丁，更新 <App/>
渲染更新后的 vnode2,n = 1

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [n, setN] = useState(0);
  const log = () => {
    setTimeout(() => {
      console.log(`n:${n}`);
    }, 3000);
  };
  return (
    <div className="App">
      <h1>{n}</h1>
      <button onClick={() => setN(n + 1)}>+1</button>
      <button onClick={log}>log</button>
    </div>
  );
}

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

import React from "react";
 import ReactDOM from "react-dom";

 function App() {
   const nRef = React.useRef(0)
   // 通过 跟初始值不同，来update
   // 但是非常的蛋疼这样写。还是用 vue3吧
   const update = React.useState(null)[1]
   const log = () => {
     setTimeout(() => {
       console.log(`n:${nRef.current}`);
     }, 3000);
   };
   return (
     <div className="App">
       <h1>{nRef.current}</h1>
       <button onClick={()=>{
         nRef.current+=1;
         update(nRef.current)
         }}>+1</button>
       <button onClick={log}>log</button>
     </div>
   );
 }

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

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const rootElement = document.getElementById("root");

const themeContext = React.createContext(null);

function App() {
  const [theme, setTheme] = React.useState("red");
  return (
    <themeContext.Provider value={{ theme, setTheme }}>
      <div className={`App ${theme}`}>
        <p>{theme}</p>
        <div>
          <ChildA />
        </div>
        <div>
          <ChildB />
        </div>
      </div>
    </themeContext.Provider>
  );
}

function ChildA() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("red")}>red</button>
    </div>
  );
}

function ChildB() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("blue")}>blue</button>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
interface Props {
  message: string;
}
interface State {
  n: number;
}
class App extends React.Component<Props, State> {
  static defaultProps = {
    message: "hello"
  };
  static displayName = "Hjx";
  y: () => void;
  constructor(props) {
    super(props);
    this.state = {
      n: 1
    };
    this.y = this.x1.bind(this);
    // 等价于 this.y = ()=> this.x1.bind(this)
  }
  x = () => {
    this.setState({
      n: this.state.n + 1
    });

    // 这种写法相当于 this.y = this.x1.bind(this);
  };
  x1() {
    console.log(this);
    //1 当前实例
    //2 undefined
    // 答案是 2
    // react 不帮你绑定 this
    // 你只能 onClick={this.x1.bind(this)}
  }
  render() {
    return (
      <div className="App">
        <div>{this.props.message}</div>
        <div>{this.state.n}</div>
        <button onClick={this.x}>+1</button>
        <br />
        <button onClick={this.x1}>默认不绑定this</button>
        <br />
        <button onClick={this.x1.bind(this)}>bind(this)绑定this</button>
        <br />
        <button onClick={this.y}>内部声明的y函数</button>
      </div>
    );
  }
}

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

class App extends React.Component<Props, State> {

  x() {
      ...
  }
}
这样写相当于 x() 挂载在 原型上， 也就是多个实例共享一个 x()

x = () => {
    this.setState({
        n: this.state.n + 1
    });
};

static defaultProps = {
    message: "hello"
};

static displayName = "Hjx";

import React from "react";
import ReactDOM from "react-dom";
// 引入 prop-types
import PropTypes from "prop-types";
import "./styles.css";
interface Props {
  message: string;
}
interface State {
  n: number;
}
class App extends React.Component<Props, State> {
  static defaultProps = {
    message: "hello"
  };
  static displayName = "Hjx";
  // 使用 prop-types 限制用户传递的 message 类型
  static propTypes = {
    message: PropTypes.string
  };
  y: () => void;
  constructor(props) {
    super(props);
    this.state = {
      n: 1
    };
  }
 
  render() {
    return (
      <div className="App">
        <div>{this.props.message}</div>
      </div>
    );
  }
}

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

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
interface Props {
  message: string;
}
interface State {
  firstName: string;
  lastName: string;
}
class App extends React.Component<Props, State> {
  static defaultProps = {
    message: "hello"
  };
  // 除了可以用计算属性
  get name() {
    return this.state.firstName + " " + this.state.lastName;
  }
  // 还可以给计算属性 赋值
  set name(newName) {
    const [firstName, lastName] = newName.split(" ");
    this.setState({
      firstName,
      lastName
    });
  }
  constructor(props) {
    super(props);
    this.state = {
      firstName: "Frank",
      lastName: "Aaa"
    };
  }
  render() {
    return (
      <div className="App">
        <div>{this.props.message}</div>
        <div>{this.name}</div>
      </div>
    );
  }
}

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

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
interface Props {
  message: string;
}
const App: React.FunctionComponent<Props> = (props) => {
  return (
    <div className="App">
        Hello
    </div>
  );
};

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

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import "./styles.css";
interface Props {
  // message 可有可无 此时有个坑
  // 你在 函数组件里 props.message.split(' ')
  // 报错不通过
  message?: string;
}
const App: React.FunctionComponent<Props> = props => {
  const [n, setN] = useState(1);
  const [m, setM] = useState(2);
  const x = () => {
    setN(n + 1);
  };
  const y = () => {
    setM(m + 1);
  };
  // 在每次UI更新之后执行 mounted或 updated之后
  /*
  useEffect(() => {
    console.log("UI更新之后，mounted或 updated之后");
  });
  */
  // 单独监听 n 的改变
  /*
  useEffect(() => {
    console.log("UI更新之后，n");
  }, [n]);
  */
  useEffect(() => {
    console.log("只执行一次");
    // 组件死之前想做什么 就 return
    return () => console.log("我死了");
  }, []);
  // 因为 你定义的 message?:string 代表可有可无
  // props.message.split(" ");
  // 你只能用以下两种方式 强制断言
  (props.message as string).split(" ");
  props.message!.split(" ");
  return (
    <div className="App">
      <div>{props.message}</div>
      <div>{n}</div>
      <button onClick={x}>n+1</button>
      <div>{m}</div>
      <button onClick={y}>m+1</button>
    </div>
  );
};

App.defaultProps = {
  message: "default message"
};
App.displayName = "Hjx";
App.propTypes = {
  message: PropTypes.string
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

const App: React.FunctionComponent<Props> = (
    {message = 'default message'}) => {
  props.message.split(" ");
};

a = 1
a = 2  就不行

而面向对象可以

public class Main {
    public static void main(String[] args) {
        Collection<Integer> c = new LinkedList<Integer>();
        
        List<Integer> list = new ArrayList(c);

        List<Integer> list2 = new ArrayList();
        list2.addAll(c);


        List<Integer> list3 = new ArrayList();
        for (Integer i: c) {
            list3.add(i);
        }

    }
}

public class ArrayList<E> extends AbstractList<E>
        implements List<E>, RandomAccess, Cloneable, java.io.Serializable
{

    ...

    public boolean add(E e) {
        // 确保容量够
        ensureCapacityInternal(size + 1);  // Increments modCount!!
        elementData[size++] = e;
        return true;
    }

    private void ensureCapacityInternal(int minCapacity) {
        // 计算容量
        ensureExplicitCapacity(calculateCapacity(elementData, minCapacity));
    }

    private void ensureExplicitCapacity(int minCapacity) {
        modCount++;

        // overflow-conscious code
        if (minCapacity - elementData.length > 0)
            grow(minCapacity);
    }

    private void grow(int minCapacity) {
        // overflow-conscious code
        int oldCapacity = elementData.length;
        // 右移一位就是 除2
        int newCapacity = oldCapacity + (oldCapacity >> 1);
        if (newCapacity - minCapacity < 0)
            newCapacity = minCapacity;
        if (newCapacity - MAX_ARRAY_SIZE > 0)
            newCapacity = hugeCapacity(minCapacity);
        // minCapacity is usually close to size, so this is a win:
        elementData = Arrays.copyOf(elementData, newCapacity);
    }


     private static int calculateCapacity(Object[] elementData, int minCapacity) {
        if (elementData == DEFAULTCAPACITY_EMPTY_ELEMENTDATA) {
            return Math.max(DEFAULT_CAPACITY, minCapacity);
        }
        return minCapacity;
    }
    ...
}

public class Main {
    public static void main(String[] args) {

        List<Integer> list = new ArrayList();
        list.add(1);
        list.add(2);
        list.add(2);
        list.add(3);

        Set<Integer> set = new HashSet(list); // [1,2,3]
    }
}

Map<String,String> map = new HashMap<>();
map.put("a":"1");
map.put("b":"2");

Set<String> keyset = map.keySet(); // ["a","b"]

// 坑来了
// 你修改 map 里的 key 会映射到 keyset里
// 你修改 keyset 里的值 会映射到 map里
map.remove("a");
// 此时 keyset ==》["b"]

Map<String,String> map = new HashMap<>();
map.put("a":"1");
map.put("b":"2");
for(Map.Entry<String,String> entry:map.entrySet()){
    System.out.println(entry.getKey());
    System.out.println(entry.getValue());
}

public class Main {
    public static void main(String[] args) {

        List<Integer> list = Arrays.asList(100000,142,-2,-323121,321321,15);

        Set set1 = new HashSet(list);
        Set set2 = new LinkedHashSet(list);
        Set set3 = new TreeSet(list);

        set1.forEach(System.out::println); // 无序的
        set2.forEach(System.out::println); // 按添加顺序
        set3.forEach(System.out::println); // 排好序的
    }
}

/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/bin/java "-javaagent:/Applications/IntelliJ IDEA.app/Contents/lib/idea_rt.jar=51272:
/Applications/IntelliJ IDEA.app/Contents/bin" 
-Dfile.encoding=UTF-8 
-classpath 
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/charsets.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/deploy.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/cldrdata.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/dnsns.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/jaccess.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/jfxrt.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/localedata.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/nashorn.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/sunec.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/sunjce_provider.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/sunpkcs11.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/ext/zipfs.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/javaws.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/jce.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/jfr.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/jfxswt.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/jsse.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/management-agent.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/plugin.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/resources.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/jre/lib/rt.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/ant-javafx.jar:/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/dt.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/javafx-mx.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/jconsole.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/packager.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/sa-jdi.jar:
/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home/lib/tools.jar:


# 当前目录的 target/classes 就是本项目里的 类文件

/Users/huangjiaxi/Desktop/java-fork-process/target/classes 

com.github.hcsp.shell.Fork

A 依赖 B , B 依赖 C , C 又依赖 D
D 从那里找呢？

-classpath 
xxx.5.0.0.jar:
xxx.4.0.0.jar

javac -cp  xx.jar xx2.jar Main.java
java -cp xx.jar xx2.jar Main

# 假设此时 jar包成百上千呢？

xxx.xxx.xxx maven 通常第一个就是包的正确的名字

每个包有自己的版本
如 junit-jupiter-api 5.5.0
它会不停的升级。版本一旦发布，maven的约定是不能更改只能继续升级。 
目的是 maven 想要实现一个可重现的构建，就是你机子上跑的和我机子上跑的 是一样的。 

因为一旦同版本允许修改，就可能你跑的时候是好的，我跑的时候是坏的

当你引入依赖

<!-- https://mvnrepository.com/artifact/org.junit.jupiter/junit-jupiter-api -->
<dependency>
    <groupId>org.junit.jupiter</groupId>
    <artifactId>junit-jupiter-engine</artifactId>
    <version>5.4.2</version>
    <scope>test</scope>
</dependency>


maven 就会去它的主仓库 https://repo1.maven.org/maven2/
按照你的 groupId 里的路径 
https://repo1.maven.org/maven2/org
https://repo1.maven.org/maven2/org/junit/
https://repo1.maven.org/maven2/org/junit/jupiter

然后按照 artifactId 找路径
https://repo1.maven.org/maven2/org/junit/jupiter/junit-jupiter-engine/

然后按照版本号 5.4.2
https://repo1.maven.org/maven2/org/junit/jupiter/junit-jupiter-engine/5.4.2/

junit-jupiter-engine-5.4.2-javadoc.jar            2019-04-07 17:29    683506      
junit-jupiter-engine-5.4.2-javadoc.jar.asc        2019-04-07 17:29       821      
junit-jupiter-engine-5.4.2-javadoc.jar.asc.md...  2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2-javadoc.jar.asc.sh...  2019-04-07 17:29        40      
junit-jupiter-engine-5.4.2-javadoc.jar.md5        2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2-javadoc.jar.sha1       2019-04-07 17:29        40    
# 源代码  
junit-jupiter-engine-5.4.2-sources.jar            2019-04-07 17:29    110900      
junit-jupiter-engine-5.4.2-sources.jar.asc        2019-04-07 17:29       821      
junit-jupiter-engine-5.4.2-sources.jar.asc.md...  2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2-sources.jar.asc.sh...  2019-04-07 17:29        40      
junit-jupiter-engine-5.4.2-sources.jar.md5        2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2-sources.jar.sha1       2019-04-07 17:29        40      
# 真正的 jar包
junit-jupiter-engine-5.4.2.jar                    2019-04-07 17:29    177798      
junit-jupiter-engine-5.4.2.jar.asc                2019-04-07 17:29       821      
junit-jupiter-engine-5.4.2.jar.asc.md5            2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2.jar.asc.sha1           2019-04-07 17:29        40      
junit-jupiter-engine-5.4.2.jar.md5                2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2.jar.sha1               2019-04-07 17:29        40    
# 当前包所依赖的包  
junit-jupiter-engine-5.4.2.pom                    2019-04-07 17:29      2395      
junit-jupiter-engine-5.4.2.pom.asc                2019-04-07 17:29       821      
junit-jupiter-engine-5.4.2.pom.asc.md5            2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2.pom.asc.sha1           2019-04-07 17:29        40      
junit-jupiter-engine-5.4.2.pom.md5                2019-04-07 17:29        32      
junit-jupiter-engine-5.4.2.pom.sha1               2019-04-07 17:29        40

<repositories>
    <repository>
        <id>alimaven</id>
        <name>aliyun maven</name>
        <url>http://maven.aliyun.com/nexus/content/groups/public/</url>
    </repository>
</repositories>

你的项目里
依赖了 A
依赖了 D

A 又依赖了 B , B又依赖了 C
D 又依赖了 C

|A
--|B
--|--|C 1.0

|D
--|C 2.0

此时 两个 C 就导致了 包冲突

-classpath A:B:C1.0:D:C2.0

# 因为之前说了 classpath hell 依赖地狱
由于全限定类名是类的唯一标识，此时如果存在两个同名不同版本的库 同时出现在 classpath 中 那么噩梦开始了

如果有同名的库出现在 classpath 中 JVM 会选择靠前的那个 也就是 C1.0

但是 靠前的那个 C1.0 不一定是你想要的那个，有可能只是你忘了。

你的项目依赖了 A / D

|A 0.1
--|B 0.1
--|--|C 0.2


|D 0.1
--|C 0.1 

此时 maven 帮你淘汰了 C0.2 版本 因为它离得太远
-classpath A0.1:D0.1:B0.1:C0.1

此时就有 bug ,因为你想要的是 C0.2

|A 
--|B 
--|--|C0.1

|D
--|E 
----|C0.2

C0.1 获胜，因为C0.1 路径相同则选择靠前的那个

public class Main{
    public static void main(String[] args){
        // 标准输出
        System.out.println("output")
        // 标准错误
        System.err.println("error")
    }
}

javac Main.java && java Main
输出
output
error

java Main > output.txt
# 发现少了一行，因为输出默认会把标准输出重定向到文件里
> error 

# 一个 “>” 代表重写覆盖， 两个">>"代表追加

重定向的 ">" 默认等价于 "文件描述符1"

# 执行 文件描述符2
java Main 2> output.txt
# error 写在了 文件里
> output

# 如何把 标准输出和 标准错误 同时输出到一个文件里
java Main > output 2>&1

# 顺序写反是无效的
java Main > output 1>&2
error

# 现在会同时打印 标准输出和标准错误， 此时我只想要 标准输出,不要标准错误
java Main 2> /dev/null
# 意思是把 错误输出丢到垃圾桶里

// 环境变量 
System.getenv("aaa")

// 系统属性 只在 jvm 中有效
System.getProperty("xxx")
System.getProperty("java.version")
System.getProperty("user.dir")

public class Main{
    public static void main(String[] args){
        System.out.println("args:"+ java.util.Arrays.toString(args));

        System.out.println("env:"+System.getenv("AAA"));
        
        System.out.println("java version:"+System.getProperty("java.version"));
        // System.getProperty("user.dir")

         System.out.println("system property:"+System.getProperty("BBB"));
    }
}

javac Main.java && java Main 1 2 3

args:[1,2,3]
env: null
java version:1.8.0...
system property:null


# 传递 系统属性
export AAA=123
java -DBBB=789 Main 

args:[]
env: 123
java version:1.8.0...
system property:789

javac -DBBB=789 Main
args:[]
env: 123
java version:1.8.0...
system property:789


javac  Main -DBBB=789
args:[-DBBB=789]
env: 123
java version:1.8.0...
system property:null