B站 React教程笔记day1（1）

佚名 6年前 (2019-05-10) 随笔 1503人围观抢沙发百度已收录

1.React简介

React并不是一个完整的MVC/MVVM框架，它只专注于提供清晰、直接的View视图层解决方案。

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

React非常轻，目标是Minimal API interface，只提供组件化相关的非常少量的API。简化了一切可以简化的东西。

React可以搭配Flux等架构（Redux实现）使用。有Flux架构护航，数据的单向流动，自称是比MVC、MVVM更高级的一种模式。可以开发大型应用的。

React使用Virtual DOM技术 ，使得它性能卓越，开销很小。

频繁的DOM操作会造成极大的资源浪费，也通常是性能瓶颈的原因。于是React 引入了Virtual DOM。

Virtual DOM的核心就是计算比较改变前后的DOM区别，然后用最少的DOM操作语句对DOM进行操作。

Virtual DOM技术使用了DIFF算法，DIFF算法是一个比较计算层次结构区别的算法，现在主要用来计算DOM之间的差异。

React中使用JSX语法糖，JSX = JavaScript + XML。js文件中写HTML模板，代码语境不需要来回切换的。

2. React配置和 HolleWorld

React配置

目录结构：

配置webpack.config.js：

const path = require('path')

module.exports = {
  entry: "./app/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "all.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  watch: true
}

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

package.json

  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.4"
  }

HolleWorld

创建app/App.js文件，这是一个组件：

import React , {Component} from "react";

// 定义一个叫做App的组件，在HTML中可以用<App></App>来使用它
// React要求自定义组件必须是大写字母开头！
// React要求自定义组件的类必须继承于React.Component类
class App extends Component{
  render(){
    //返回一个jsx语法
    return <h1>Holle World {1 + 2}</h1>;
  }
}

export default App;

使用 App 组件：

import React from "react";
import {render} from "react-dom";
// 引入组件
import App from "./App.js";

// 第一个参数是jsx语法
// 第二个参数表示组件挂在id为app-container的div中
render(
  <App></App>,
  document.getElementById("app-container")
);

3. jsx 语法

jsx语法不能直接使用，需要@babel/preset-react翻译

1. render(){} 中必须被一个单独的大标签包裹，比如div或者section

return (
  <div>
    <h1>我是React，很高兴遇见你！</h1>
    <h1>我是React，很高兴遇见你！</h1>
  </div>
);

2. 标签必须封闭 `<img src="" />`

3. class要写成className，for要写成htmlFor

4. HTML注释不能使用，只能使用JS注释

5. 原生标签比如p、li、div如果要使用自定义属性，必须用data-前缀

6. JS表达式用{}单大括号包裹

7. 可以运行函数：render() { {this.func('参数')} }

8. 样式使用双大括号

<div style={{"width":"100px","height":20 + 30 + "px","backgroundColor" : "red"}}></div>

9. 可以使用数组，数组中如果是JSX语法，数组会被自动展开

render(){
  //定义一个数组，定义的JSX项目上要求有key属性，只要是重复的数组项目，都要有不能重复的key属性，这是要求。
  let arr = ["白板","幺鸡","二条","三饼"].map((item,index)=>{
    return <li key={index}>{item}</li>
  });

  return (<ul> {arr} </ul>);