1 引入 React

1 cdn 引入

1、先引入 React: ...umd/react.development.js;

2、再引入 ReactDOM: ...umd/react-dom.development.js;

3、优先使用 umd，同时支持 NOde.js 和浏览器；

webpack 引入

yarn add react react-dom
import React from 'react'
import ReactDOM from 'react-dom'
注意大小写

create-react-app

yarn global add create-react-app
yarn create react-app my-app
cd my-app
yarn start

2 React 元素 和 函数组件

1 React 元素

1、App1 = React.createElement('div',null,n) App1 是一个 React 元素；

2、createElement 的返回值 element 可以代表一个 div,但element 并不是真正的 div(DOM对象),所以一般称 element 为虚拟 DOM 对象。

2 函数组件 ()=>React 元素

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

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

const rootElement = document.getElementById("root");
let n=0
const App = ()=> React.createElement('div',null,[
  n,
  React.createElement(
    'button',
    {
      onClick:()=>{
        n += 1
        console.log(n)
        ReactDOM.render(App(),rootElement)
      },
    },
    '+1'
  )
])
ReactDOM.render(App(),rootElement)

2、返回 element 的函数，也可以代表一个 div;

3、这个函数可以多次执行，每次得到最新的虚拟 DOM;

4、React 会对比两个虚拟 div，找出不同（DOM diff 算法），局部更新视图；

5、怎么证明局部更新： 给控制台的元素添加属性，如 button 的文字由 +1 变为 +111，此时点击页面中的 button ,页面上的 数字会 +1 ,但 button 上面的文字还是 +111，而不会变为 +1，说明 React 只会更新该更新的部分;

5、函数 App2 是延迟执行的代码，会在被调用的时候执行；这里说的是代码执行的时机，不是说同步和异步。同步和异步关注的是得到结果的时机。

3 JSX

1 概念

1、X 表示扩展，，所以 JSX 表示 JS 的扩展版，会将 XML 转译为 React.createElement()；

2、webpack 内置了 babel-loader，babel-loader 内置了 jsx-loader，jsx-loader 会将 <button onClick='add'> +1 </button> 变成 React.createElement('button',{onClick},'+1')

2 使用

1、cdn 引入 babel.min.js ；将 <script> 改为 <script type = 'text/babel'>，不要用这种方法，效率太低；

2、webpack + babel-loader;

3、使用 create-react-app，默认将 JS 当做 JSX 处理。

3 注意事项

1、<div className = 'red' > n </div> 被转译为 React.createElement('div',{className:'red'},'n')

2、插入变量：标签里面的所有 JS 代码都要用 {} 包起来；

3、变量 n : {n} ; 变量 对象 ： { {name:'xxx'} }

4、return 后面加 ()

4 JSX 的条件判断

1、

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

还可以写成：

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

5 JSX 循环

const Component = (){
  return props.number.map((n,index) => {
    return <div> 下标 {index} 值为 {n} </div>
  })
}
//如果需要外面的 div ，可以写成：
const Component = ()=>{
  return (
    <div>
      {
        props.number.map((n,index) => {
          return <div> 下标 {index} 值为 {n} </div>
        })
      }
    </div>
  )
}

还可以写为：

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