全局引入React 和 ReactDOM

React是一个全局对象：

image.png

ReactDom也是一个全局对象：

image.png

用CDN的方式引入并用React创建一个对象：
image.png
React.createElement("div", { className: "red" }, [xxx])React链接

  1. //index.html
  3. <!DOCTYPE html>
  4. <html>
  5.   <head>
  6.     <title>Parcel Sandbox</title>
  7.   </head>
  8.   <body>
  9.     <div id="root"></div>
  10.     <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0/umd/react.development.js"></script>
  11.     <script src="https://cdn.bootcdn.net/ajax/libs/react-dom/17.0.0/umd/react-dom.development.js"></script>
  12.     <script src="src/index.js"></script>
  13.   </body>
  14. </html>
  18. //index.js
  20. let n = 0;
  21. console.log(n);
  22. const APP = () =>
  23.   React.createElement("div", { className: "red" }, [
  24.     n,
  25.     window.React.createElement(
  26.       "button",
  27.       {
  28.         onClick: () => {
  29.           n += 1;
  30.           window.ReactDOM.render(APP(), root);
  31.           console.log(n);
  32.         }
  33.       },
  34.       "+1"
  35.     )
  36.   ]);
  37. window.ReactDOM.render(APP(), root);

直接用等于号会立刻取值并记录下料，箭头函数会延迟执行，在每次调用时执行
const APP1 = React.createElement("div", { className: "red" }, n)
APP1是一个React元素
const APP2 = ()=> React.createElement("div", { className: "red" }, n)
APP2是一个React函数组件

函数组件vs类组件

  1. //函数组件
  3. function Welcome(props){
  4.   return <h1>Hello,{props.name}</h1>
  5. }
  6. <Welcome name="jack"/>
  8. //类组件
  10. class Welcome extends React.component {
  11.   render(){
  12.     return <h1>Hello,{this.props.name}</h1>
  13.   }
  14. }
  15. <Welcome name="jack"/>

JSX

  1. //jsx
  3. 函数/变量都要有{}包住
  4. <div id="app"></div>
  5.  let n = 0;
  6.       const App = () => (
  7.         <div>
  8.           {n}
  9.           <button
  10.             onClick={() => {
  11.               n += 2;
  12.               render();
  13.             }}
  14.           >
  15.             +2
  16.           </button>
  17.         </div>
  18.       );
  19.       const render = () =>
  20.         ReactDOM.render(<App />, document.querySelector("#app"));
  21.       render();

State：类组件

State，SetState不会改变原来的对象，而是生成一个新的对象去赋值（数据不可变）

  2. class Son extends React.Component {
  3.   constructor() {
  4.     super();
  5.     this.state = {
  6.       n: 0
  7.     };
  8.   }
  9.   add() {  //异步更新
  10.     //this.setState({ n: this.state.n + 1 });
  11.     this.setState((state)=>{
  12.       const x = state.n + 1
  13.       console.log(x)  
  14.     })
  15.   }
  16.   render() {
  17.     return (
  18.       <div className="Son">
  19.          n: {this.state.n}
  21.         //事件绑定    
  22.         <button onClick={() => this.add()}>+1</button>
  23.         <Grandson />
  24.       </div>
  25.     );
  26.   }
  27. }

类组件里事件：

  1. class x extends React.component{
  2.   constructor{
  3.     this.add = () => this.setState({n:this.state.n + 1})
  4.   }
  5. }
  6. //
  7. class x extends React.component{
  8.    add = () => this.setState({n:this.state.n + 1})
  9. }

箭头函数的this是当前对象的，而普通函数的this是在window上