如何引入React

从CDN引入React（注意顺序）

• 引入React：https://.../react.x.min.js

• 引入ReactDOM：https://.../react-dom.x.min.js

(如果是本地运行的话，就用parcel src/index.html运行，如果用codesandbox直接打开就好 )

cjs 和umd 的区别

通过webpack 引入 React

用React实现+1

console.log(window.React);
console.log(window.React.createElement);
console.log(window.ReactDOM);
console.log(window.ReactDOM.render);
const React = window.React;
const ReactDOM = window.ReactDOM;
let n = 0;
const App = React.createElement("div", null, [
  n,
  React.createElement(
    "button",
    {
      onClick: () => {
        n += 1;
        console.log(n); //这一句是精髓 
        ReactDOM.render(App, document.querySelector("#app")); // 为什么还是不能重新渲染
      }
    },
    "+1"
  )
]);
ReactDOM.render(App, document.querySelector("#app"));

• 为什么不能重新渲染，因为App = React.createElement...只渲染一次，如果想要执行，代码这样写

console.log(window.React);
console.log(window.React.createElement);
console.log(window.ReactDOM);
console.log(window.ReactDOM.render);
const React = window.React;
const ReactDOM = window.ReactDOM;
let n = 0;
const App = () =>
React.createElement("div", null, [
  n,
  React.createElement(
    "button",
    {
      onClick: () => {
        n += 1;
        console.log(n); //这一句是精髓
        ReactDOM.render(App(), document.querySelector("#app")); // 为什么还是不能重新渲染
      }
    },
   "+1"
  )
]);
ReactDOM.render(App(), document.querySelector("#app"));

例子

用立即执行函数

对比普通代码和函数

对比React元素和函数组件

对比

• App1 = React.createElement('div', null, n),APP1是一个React元素

• App2 = ()=> React.createElement('div', null, n),APP2是一个函数组件

React元素和()=> React 元素

JSX

• X表示扩展，所以JSX就是JS的扩展版

使用JSX的方法

使用JSX的注意事项

if...else...(条件判断)

在Vue里：

<template>
  <div>
    <div v-if="n%2===0">n是偶数 </div>
    <span v-else>n是奇数 </span>
  </div>
</template>

在react里：

const Component = () => {
  return n%2===0 ? <div>n是偶数 </div> :
<span>n是奇数 </span>
}

// 如果需要外面的div，可以写成
const Component = () => {
  return (
    <div>
      { n%2===0 ? <div>n是偶数 </div> : <span>n是奇数 </span> }
    </div>
  )
}

或者

const Component = () => { 
  const content = (
    <div>
      { n%2===0 ? <div>n是偶数 </div> : <span>n是奇数 </span> }
    </div>
  )
  return content 
}

或者

const Component = () => {
  const inner = n%2===0 ? <div>n是偶数 </div> : <span>n是奇数 </span>
  const content = (
    <div>
      { inner }
    </div>
  )
  return content
}

或者

循环语句（loop）

在Vue里面：

在React里面：

总结