React起手式

引入React

CDN引入React
bootcdn

// 引入 React
<script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
// 引入 ReactDOM
<script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>

cjs 和 umd 的区别

cjs 全称是 Common JS，是 Node.js 支持的模块规范
umd 是统一模块定义，兼容各种模块规范(含浏览器)
理论上优先使用 umd，同时支持 Node.js 和浏览器
最新的模块规范是使用import和export关键字

通过webpack引入React

yarn add react react-dom
import React from 'react'
import ReactDOM from 'react-dom'

React元素和函数组件

React 元素

App1 = React.createElement('div',null,n)

createElement的返回值 element可以代表一个 div，element为虚拟DOM对象

React 函数组件

App2 = ()=> React.createElement('div',null,n)

函数组件可以多次执行，返回element的函数，每次得到最新的虚拟div

使用 React实现 +1

// html
<body>
  <div id="app"></div>
    <script src="https://cdn.bootcss.com/react/16.10.2/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.10.2/umd/react-dom.development.js"></script>
</body>

//js
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,
const App =()=> React.createElement("div",null,[n,
  React.createElement("button",{
    onClick:()=>{
      n += 1;
      console.log(n);
      //ReactDOM.render(App,document.querySelector("#app"));
      ReactDOM.render(App(),document.querySelector("#app"));
    }
  },"+1"
)                                           
])
//ReactDOM.render(App, document.querySelector("#app"));
ReactDOM.render(App(), document.querySelector("#app"));

点击 +1 按钮，n值未变，只需将App变为函数，每次render重新读取n的值

jsx语法

使用CDN
引入babel.min.js，把<script> 改成 <script type="text/babel">，babel会自动进行转译
使用 webpack + babel-loader
使用 create-react-app

注意事项

注意 className

<div className="red"> n </div>
React.createElement('div',{className:'red'},"n")

插入变量:标签里面的js代码要用 {} 包起来(变量、对象都要用 {}包起来)
习惯return后面加()

const App = ()=>{
  return (
    <div>App</div>
  )
}

条件判断

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

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
}

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

循环控制

const Component = (props) => {
  return props.numbers.map((n,index)=>{
    return <div>下标{index}值为{n}</div>
  })
}

const Component = (props) => {
  return ( <div>
    {  props.numbers.map((n,index)=>{
      return <div>下标{index}值为{n}</div>
    })}
  </div>)
 }

const Component = (props) => {
  const array = []
  for(let i=0;i<props.numbers.length;i++){
    array.push(<div>下标{i}值为{props.numbers[i]}</div>)
  }
  return <div>{ array }</div>
}

最后编辑于：2020.07.26 18:05:38