React初体验

React初体验

React的引入

CND引入

  • 代码示例
 <body>
    <div id="app"></div>
    <!--引入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>
</body>
  • cjs和umd的区别
  1. cjs全称CommonJS,是Node.js支持的模块规范
  2. umd是统一模块定义,兼容各种模块规范(含浏览器)
  3. 推荐使用umd,因为它同时支持Node.js和浏览器
  4. 最新的模块规范是使用import和export关键字

通过webpack引入React

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

新手可以用create-react-app

yarn global add create-react-app
//安装完成后,就可以执行下面语句安装
create-react-app react-demo-2
  • 代码示例
<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>React-demo</title>
    <meta charset="UTF-8" />
  </head>
  <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>
    <script src="src/index.js"></script>
  </body>
</html>
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是一个函数组件
//函数App2是延迟执行的代码,会在被调用的时候执行

React元素

  1. createElement的返回值element可以代表一个div
  2. element并不是一个真正的div(DOM对象)
  3. element称为虚拟DOM对象

()=> React元素

  • 返回element的函数,亦可代表一个div
  • 该函数可多次执行,每次执行得到最新的虚拟div
  • React会对比两个虚拟div,找出不同,局部更新视图
  • 找不同的虚拟DOM的算法叫做DOM Diff算法

JSX

  • 原来是用jsx-loader,但是后面升级了被babel-loader取代
  • babel-loader被webpack内置
  • 代码示例
<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>
    <!--引入JSX-->
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
    <!--使用JSX-->
    <script type="text/babel">
      let n = 0;
      const App = () => (
        <div>
          {n}
          <button
            onClick={() => {
              n += 1;
              render();
            }}
          >
            +1
          </button>
        </div>
      );
      const render = () =>
        ReactDOM.render(<App />, document.querySelector("#app"));
      render();
    </script>
  </body>

使用JSX的注意事宜

  1. 注意className
<div className="red">n</div>
//等价
React.createElement('div',{className:'red'},n)
  1. 插入变量
  • 标签里面的所有JS代码要用{}括起来
  • 需要变量n,用{}把n包起来
  • 需要对象,用{}把对象包起来,{{name:‘xiaobangsky’}}
  1. 习惯 return 后面加()

JSX的条件判断

let n = 3;
const Test = ()=>{
return n % 2 === 0 ? <div>n是偶数</div>:
<span>n是奇数</span>
}
const render = () =>
ReactDOM.render(<Test />, document.querySelector("#app"));
render();

JSX的循环

const Test = (props)=>{
return (<div>
{
    props.map((n,index)=>{
    return <div>下标{index}值为:{n}</div>
    })
}
</div>)
}
const render = () =>
ReactDOM.render(Test([2,3,4]), document.querySelector("#app"));
render();

JSX的总结

  • 将XML转译为React.createElement
  • 使用{}插入JS代码
  • create-react-app默认将JS当作JSX处理
  • 条件判断、循环要用原生JS实现
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页