React 框架入门

Seeyousoon
194 阅读5分钟

React 是一个用于构建用户界面的 JavaScript 库

引入React 三种方法

方法一：从CDN中引入

<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>

cjs 和 umd 的区别
cjs全称 Common JS 是Node.js支持的模块规范
umd是统一模块定义，兼容各种模块规范（包括浏览器）
优先使用umd，同时支持Node.js和浏览器
最新的模块规范是使用 import 和 export 关键字

方法二：通过webpack 引入React

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

方法三：使用 create-react-app

yarn global add create-react-app
cd /d/Software/jirengu/
create-react-app react-demo-1
cd react-demo-1
yarn start
start .

练习：使用React 实现+1功能

<body>
  <div id="root"></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>
  <script src="src/index.js"></script>
</body>

const React = window.React;
const ReactDOM = window.ReactDOM;
const root = document.querySelector('#root');
let n = 0;
const App = ()=> React.createElement("div", {className:'red'}, [
  n,
  React.createElement(
    "button",
  {
    onClick: () => {
      n += 1;
      ReactDOM.render(App(), root);
    }
  },
  "+1"  
  )
]);
ReactDOM.render(App(), root);

const App = React.createElement('div', {className:'red'}, n)
声明一个app = 用React创建一个div，class是red，里面有个n
APP只执行了一次，需要变成函数，才能一直执行

ReactDOM.render(App(), root);
App()是render什么，root是render到哪

函数执行时机，函数变量

let i
for(i=0; i<6; i++){
setTimeout(()=>{console.log(i)},1000)
}
打印出 6,6,6,6,6,6
setTimeout(fn, 1000) 1秒之后尽快执行，中间有其它代码，先执行其它代码

函数里的变量，只会在执行时计算

let i
for(i=0; i<6; i++){ 
//每次j=i，i都是进入新的作用域，所以会生成6个j，打印出0,1,2,3,4,5
  let j = i
  setTimeout(()=>{console.log(j)},1000)
}

使用let ，每次进入都会生成虚拟的i，for let 才有这个效果

立刻执行函数

for(var i = 0; i<6; i++){
  !function(i){
    setTimeout(()=>{console.log(i)},1000)
  }(i)
}

!防止报错，!function(i){}(i)，第一个i是形式参数，第二个i是实际参数
函数特点，如果函数传了实际参数，会把实际参数i，赋值到形式参数i
形式参数可以变成同名，一个i是外面的，一个是里面的

函数特点（普通代码与函数）

普通代码：let b = 1 + a

函数： let fn = () => 1 + a
       let b = f()

普通代码立即求值，读取a的当前值
函数会等调用是在求值，即延时求值，求值时才会读取a的新值

对比React元素和函数组件

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

App2= ()=>React.createElement('div', null, n)
App2 是一个 React函数组件
函数App2是 延迟执行的代码，会在被调用的时候执行，代码执行时机

React 元素
createElement 的返回值 element 可以代表一个div
但 element 并不是真正的div（DOM对象）
所以我们一般称element 为虚拟 DOM对象

()=>React元素
返回element的函数，也可以代表一个div
这个函数可以多次执行，每次得到新的虚拟div
React会对比2个虚拟div，找出不同，局部更新视图
找不同的算法叫做 DOM Diff算法

JSX 语言（JS扩展版）

使用JSX，方法一：CDN
引入babel.min.js
把<script>改成<script type="text/babel">
babel 会自动进行转译

<script type="text/babel">
  const App = ()=>(
    <div>
      {n}
        <button
          onClick={()=>{n+=1;render();}}
        >
)

方法二： webpack+babel-loader

方法三：使用create-react-app
yarn global add create-react-app
cd /d/Software/fengfeng/
create-react-app react-demo-1
cd react-demo-1
yarn start
start .

使用JSX注意事项

注意className
<divclassName="red">n</div>
被转译为
React.createElement('div',{className:'red'}, "n")

插入变量
标签里面的所有JS代码都要用{}包起来
如果需要变量n，变量n也用{}包起来
如果需要对象，对象也用{}包起来，例如 {{name:'frank'}}

return后面加括号
return(<div></div>)  括号不能删除，删除就会return undefined

if else 条件控制语句

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

React里（JSX的条件判断）
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
}

循环语句 loop

在Vue里可以遍历数组和对象
<template>
  <div>
    <div v-for="(n, index) in numbers"
    :key="index">下标{{index}},值为{{n}}</div>
  </div>
</template>

在React里
const Component = (props) => {
  return props.numbers.map((n,index)=>{
    return <div>下标{index}值为{n}</div>
  })
}
如果需要外面的div，可以写成
const Component = (props) => {
  return (<div>
    { props.number.map((n,index)=>{
        return <div>下标{index}值{n}</div>
}) }
    </div>)
}
在React里还可以这样写
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>
}

React语法很灵活，就是在写原生JS

详细资料：React 文档

avatar
文章
阅读
粉丝