React初体验

最新推荐文章于 2022-06-19 10:42:01 发布

xiaobangsky

最新推荐文章于 2022-06-19 10:42:01 发布

阅读量111

点赞数

分类专栏：前端体系构建文章标签： react

本文链接：https://blog.csdn.net/xiaobangsky/article/details/111658155

版权

前端体系构建专栏收录该内容

71 篇文章 2 订阅

订阅专栏

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的区别

cjs全称CommonJS,是Node.js支持的模块规范
umd是统一模块定义，兼容各种模块规范（含浏览器）
推荐使用umd,因为它同时支持Node.js和浏览器
最新的模块规范是使用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元素

createElement的返回值element可以代表一个div
element并不是一个真正的div(DOM对象)
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的注意事宜

注意className

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

插入变量

标签里面的所有JS代码要用{}括起来
需要变量n,用{}把n包起来
需要对象，用{}把对象包起来,{{name:‘xiaobangsky’}}

习惯 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实现

xiaobangsky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
React初体验

React初体验React初体验React的引入CND引入通过webpack引入React新手可以用create-react-appReact元素和函数组件React元素()=> React元素JSX使用JSX的注意事宜JSX的条件判断JSX的循环JSX的总结React的引入CND引入代码示例 <body> <div id="app"></div>  <script src="htt
复制链接

扫一扫