快速上手React

eb前端三大主流框架

1、Angular

大家眼里比较牛的框架，甚至有人说三大框架中只有它能称得上一个完整的框架，因为它包含的东西比较完善，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能。对于刚开始学习使用框架的小伙伴们，可以推荐这个框架，学会之后简直能颠覆之前你对前端开发的认知。使用 TypeScript能够提高代码可维护性，有利于后期重构。双向数据流很方便，但是等业务复杂之后，你可能就搞不清楚数据流了。还有令人不开心的脏值检查，以及directive的封装并没有解决视图与数据关系完全分离，有时候还要用$digist强制触发检测。

2、React（也是接下来要讲的）

这个框架本身比较容易理解，它的结构很清晰，就是由十几个API组成，然后异步渲染，我们只需要处理好接口和维护就好了，但是很多人反映上手还是有一定的的难度的。React是单向数据流，代码写起来会较双向数据流多一些，但是同样的排查问题时思路清晰很多。

3、Vue

号称是最简单，最容易上手的框架，同时也是行内的大趋势，还可以用来开发最火的小程序。毕竟用这神器，代码码得飞快，项目也能快速上线。同时他也是双向数据流。有些人认为Vue是Angular和React的结合，既有Angular的模板语法也有React的组件化体系。

React 简介

React 起源于 Facebook 内部项目，用来架设 Instagram 网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1、React 主要的原理

Virtual DOM 虚拟 DOM；传统的 web 应用，操作 DOM 一般是直接更新操作的，DOM 更新通常是比较昂贵的。而 React 为了尽可能减少对 DOM 的操作，提供了一种不同的而又强大的方式来更新 DOM，代替直接的 DOM 操作。就是 Virtual DOM,一个轻量级的虚拟的 DOM，就是 React 抽象出来的一个对象，描述 DOM 应该是什么样子的，应该如何呈现。通过这个 Virtual DOM 去更新真实的 DOM，由这个 Virtual DOM 管理真实 DOM 的更新。知了堂Java8.0版，让你少走弯路，摆脱就业困境！

React 有个 diff 算法，更新 Virtual DOM 并不保证马上影响真实的 DOM，React 会等到事件循环结束，然后利用这个 diff 算法，通过当前新的 dom 表述与之前的作比较，计算出最小的步骤更新真实的 DOM。

2、使用 React 应用脚手架 create-react-app

开箱即用
安装 Node.js 环境

npm install -g create-react-app
create-react-app demo-app
cd demo-app
npm start

package.json 说明

scripts

"scripts": {
    "start": "react-scripts start", // 开始运行项目
    "build": "react-scripts build", // 生成环境构建
    "test": "react-scripts test", // 测试用例
    "eject": "react-scripts eject" // 自定义 webpack 配置
  },

dependencies React 运行所需依赖

"dependencies": {
  ...
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3"
  ...
  },

3、运行项目 npm start，项目默认在 3000 端口，

http://localhost:3000/

4、React JSX 语法

使用 ReactDOM.render 进行渲染

const element = <div>这是一个元素</div>;
ReactDOM.render(element, document.getElementById("app"));

可以通过 jsx 定义 html 元素，render 函数进行渲染。注意：在渲染的根节点只允许一个元素存在，不然会报错，不能正常渲染。
设置样式时不能用 class 设置, 用 className 进行设置。
使用 style, 需要使用大写

const styleName = { marginLeft: 10 };
const element = <div style={styleName}>测试应用</div>;
ReactDOM.render(element, document.getElementById("app"));

定义事件，React 事件和原生 html + js 定义事件一直，React 定义事件需要大写，驼峰命名

const element = (
  <div>
    <p
      onClick={() => {
        console.log("点击事件");
      } }
    >
      事件定义
    </p>
  </div>
);
ReactDOM.render(element, document.getElementById("app"));

简单表达式

const element = <div>{1 + 1}</div>;
ReactDOM.render(element, document.getElementById("app"));
const element = <h1>{index == 1 ? "显示" : "不显示"}</h1>;
ReactDOM.render(element, document.getElementById("app"));

注释

5、React 组件化

在 react 中，一切皆组件，根据划分不同组件，可以使代码复用，减少代码编写
定义组件分 ES6 和函数组件，2021国家护网行动人才招募中
ES6 class 方式定义需要继承 React.Component，实现 render 函数，返回一个元素

class ClassComponent extends React.Component {
  render() {
    return <div>是一个 Class 组件</div>;
  }
}

函数组件

const FunctionComponent = () => <div>是一个 Function 组件</div>;

浏览器查看效果

6、React state & props

state 在 react 组件中可以保存当前所操作数据状态
props 可以通过父子组件进行数据传递和交互
使用 ES6 组件方式使用 state

class ClassComponent extends React.Component {
  state = {
    count: 0,
  };
  handleAdd = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  };
  handleReduce = () => {
    const { count } = this.state;
    this.setState({ count: count - 1 });
  };
  render() {
    const { count } = this.state;
    return (
      <div>
        <p>Class 组件</p>
        <p>点前计数 {count}</p>
        <button onClick={this.handleAdd}>加</button>
        <button onClick={this.handleReduce}>减</button>
      </div>
    );
  }
}

使用函数组件方式使用 state
函数组件操作 state 可以使用 hooks 操作
hooks 函数为 React 16.8 引入新 API，方便处理传统 React 方式操作数据

import React, { useState } from "react";
const FunctionComponent = () => {
  const [count, setCount] = useState(0);
  const handleAdd = () => {
    setCount(count + 1);
  };
  const handleReduce = () => {
    setCount(count - 1);
  };
  return (
    <div>
      <p>Function 组件</p>
      <p>点前计数 {count}</p>
      <button onClick={handleAdd}>加</button>
      <button onClick={handleReduce}>减</button>
    </div>
  );
};

7、props 使用

定义

const App = () => {
  return (
    <div className="App">
      <ClassComponent title="Class Props Title" />
      <FunctionComponent title="Function Props Title" />
    </div>
  );
};
export default App;

接收，使用
Class 组件

Function 组件

效果

8、React 生命周期

16.x 和 17.x 版本，对应生命周期函数有所变化
被打横线生命周期函数在 React 17.x 版本已被移除，不建议使用

常用生命周期函数

// 组件被挂载
  componentDidMount() {}
  // 发生异常
  componentDidCatch() {}
  // 组件重新渲染 组件状态 || 属性改变
  componentDidUpdate() {}
  // 判断组件是否应该重新渲染，默认 true
  shouldComponentUpdate(nextProps, nextState) {}
  // 组件将被卸载
  componentWillUnmount() {}

componentDidMount 数据加载，网络请求
componentDidCatch 捕获异常，上报
shouldComponentUpdate 组件发生变化，需要重新调整逻辑，重新渲染组件
componentWillUnmount 清除资源，比如定时器，防止内存泄露

9、hooks useEffect

useEffect(() => {
  // did mount
  // ajax request
  return () => {
    // un mount
    // clear resource
  };
  // 当 value 发生变化，重新触发
}, [value]);

总结

能够正确使用 React 生命周期函数和 state & props，事件定义。可以解决大部分 React 项目开发。

好啦，这次就为大家分享这些了，更多前端学习资源，欢迎关注我们~

自：coderwhy

前面说过，整个前端已经是组件化的天下，而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案。

一. React中的css方案

1.1. react中的css

事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点。

在组件化中选择合适的CSS解决方案应该符合以下条件：

可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的原生；
可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式；
支持所有的css特性：伪类、动画、媒体查询等；
编写起来简洁方便、最好符合一贯的css风格特点；
等等...

在这一点上，Vue做的要远远好于React：

Vue通过在.vue文件中编写 <style><style> 标签来编写自己的样式；
通过是否添加 scoped 属性来决定编写的样式是全局有效还是局部有效；
通过 lang 属性来设置你喜欢的 less、sass等预处理器；
通过内联样式风格的方式来根据最新状态设置和改变css；
等等...

Vue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

相比而言，React官方并没有给出在React中统一的样式风格：

由此，从普通的css，到css modules，再到css in js，有几十种不同的解决方案，上百个不同的库；
大家一直在寻找最好的或者说最适合自己的CSS方案，但是到目前为止也没有统一的方案；

在这篇文章中，我会介绍挑选四种解决方案来介绍：

方案一：内联样式的写法；
方案二：普通的css写法；
方案三：css modules；
方案四：css in js（styled-components）；

1.2. 普通的解决方案

1.2.1. 内联样式

内联样式是官方推荐的一种css样式的写法：

style 接受一个采用小驼峰命名属性的 JavaScript 对象，，而不是 CSS 字符串；
并且可以引用state中的状态来设置相关的样式；

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      titleColor: "red"
    }
  }

  render() {
    return (
      <div>
        <h2 style={{color: this.state.titleColor, fontSize: "20px"}}>我是App标题</h2>
        <p style={{color: "green", textDecoration: "underline"}}>我是一段文字描述</p>
      </div>
    )
  }
}

内联样式的优点:

1.内联样式, 样式之间不会有冲突
2.可以动态获取当前state中的状态

内联样式的缺点：

1.写法上都需要使用驼峰标识
2.某些样式没有提示
3.大量的样式, 代码混乱
4.某些样式无法编写(比如伪类/伪元素)

所以官方依然是希望内联合适和普通的css来结合编写；

1.2.2. 普通的css

普通的css我们通常会编写到一个单独的文件。

App.js中编写React逻辑代码：

import React, { PureComponent } from 'react';

import Home from './Home';

import './App.css';

export default class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2 className="title">我是App的标题</h2>
        <p className="desc">我是App中的一段文字描述</p>
        <Home/>
      </div>
    )
  }
}

App.css中编写React样式代码：

.title {
  color: red;
  font-size: 20px;
}

.desc {
  color: green;
  text-decoration: underline;
}

这样的编写方式和普通的网页开发中编写方式是一致的：

如果我们按照普通的网页标准去编写，那么也不会有太大的问题；
但是组件化开发中我们总是希望组件是一个独立的模块，即便是样式也只是在自己内部生效，不会相互影响；
但是普通的css都属于全局的css，样式之间会相互影响；

比如编写Home.js的逻辑代码：

import React, { PureComponent } from 'react';

import './Home.css';

export default class Home extends PureComponent {
  render() {
    return (
      <div className="home">
        <h2 className="title">我是Home标题</h2>
        <span className="desc">我是Home中的span段落</span>
      </div>
    )
  }
}

又编写了Home.css的样式代码：

.title {
  color: orange;
}

.desc {
  color: purple;
}

最终样式之间会相互层叠，只有一个样式会生效；

1.2.3. css modules

css modules并不是React特有的解决方案，而是所有使用了类似于webpack配置的环境下都可以使用的。

但是，如果在其他项目中使用，那么我们需要自己来进行配置，比如配置webpack.config.js中的modules: true等。

但是React的脚手架已经内置了css modules的配置：

.css/.less/.scss 等样式文件都修改成 .module.css/.module.less/.module.scss 等；
之后就可以引用并且进行使用了；

使用的方式如下：

css modules用法

这种css使用方式最终生成的class名称会全局唯一：

生成的代码结构

css modules确实解决了局部作用域的问题，也是很多人喜欢在React中使用的一种方案。

但是这种方案也有自己的缺陷：

引用的类名，不能使用连接符(.home-title)，在JavaScript中是不识别的；
所有的className都必须使用{style.className} 的形式来编写；
不方便动态来修改某些样式，依然需要使用内联样式的方式；

如果你觉得上面的缺陷还算OK，那么你在开发中完全可以选择使用css modules来编写，并且也是在React中很受欢迎的一种方式。

二. CSS in JS

2.1. 认识CSS in JS

实际上，官方文档也有提到过CSS in JS这种方案：

“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义；
注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度；

在传统的前端开发中，我们通常会将结构（HTML）、样式（CSS）、逻辑（JavaScript）进行分离。

但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。
样式呢？样式也是属于UI的一部分；
事实上CSS-in-JS的模式就是一种将样式（CSS）也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态；
所以React有被人称之为 All in JS；

当然，这种开发的方式也受到了很多的批评：

Stop using CSS in JavaScript for web development
https://hackernoon.com/stop-using-css-in-javascript-for-web-development-fa32fb873dcc

批评声音虽然有，但是在我们看来很多优秀的CSS-in-JS的库依然非常强大、方便：

CSS-in-JS通过JavaScript来为CSS赋予一些能力，包括类似于CSS预处理器一样的样式嵌套、函数定义、逻辑复用、动态修改状态等等；
依然CSS预处理器也具备某些能力，但是获取动态状态依然是一个不好处理的点；
所以，目前可以说CSS-in-JS是React编写CSS最为受欢迎的一种解决方案；

目前比较流行的CSS-in-JS的库有哪些呢？

styled-components
emotion
glamorous

目前可以说styled-components依然是社区最流行的CSS-in-JS库，所以我们以styled-components的讲解为主；

安装styled-components：

yarn add styled-components

2.2. styled-components

2.2.1. 标签模板字符串

ES6中增加了模板字符串的语法，这个对于很多人来说都会使用。

但是模板字符串还有另外一种用法：标签模板字符串（Tagged Template Literals）。

我们一起来看一个普通的JavaScript的函数：

function foo(...args) {
  console.log(args);
}

foo("Hello World");

正常情况下，我们都是通过函数名() 方式来进行调用的，其实函数还有另外一种调用方式：

foo`Hello World`; // [["Hello World"]]

如果我们在调用的时候插入其他的变量：

模板字符串被拆分了；
第一个元素是数组，是被模块字符串拆分的字符串组合；
后面的元素是一个个模块字符串传入的内容；

foo`Hello ${name}`; // [["Hello ", ""], "kobe"];

在styled component中，就是通过这种方式来解析模块字符串，最终生成我们想要的样式的

2.2.2. styled基本使用

styled-components的本质是通过函数的调用，最终创建出一个组件：

这个组件会被自动添加上一个不重复的class；
styled-components会给该class添加相关的样式；

比如我们正常开发出来的Home组件是这样的格式：

<div>
  <h2>我是Home标题</h2>
  <ul>
    <li>我是列表1</li>
    <li>我是列表2</li>
    <li>我是列表3</li>
  </ul>
</div>

我们希望给外层的div添加一个特殊的class，并且添加相关的样式：

styled-components基本使用

另外，它支持类似于CSS预处理器一样的样式嵌套：

支持直接子代选择器或后代选择器，并且直接编写样式；
可以通过&符号获取当前元素；
直接伪类选择器、伪元素等；

const HomeWrapper = styled.div`
  color: purple;

  h2 {
    font-size: 50px;
  }

  ul > li {
    color: orange;

    &.active {
      color: red;
    }

    &:hover {
      background: #aaa;
    }

    &::after {
      content: "abc"
    }
  }
`

最终效果如下

2.2.3. props、attrs属性

props可以穿透

定义一个styled组件：

const HYInput = styled.input`
  border-color: red;

  &:focus {
    outline-color: orange;
  }
`

使用styled的组件：

<HYInput type="password"/>

props可以被传递给styled组件

<HomeWrapper color="blue">
</HomeWrapper>

使用时可以获取到传入的color：

获取props需要通过${}传入一个插值函数，props会作为该函数的参数；
这种方式可以有效的解决动态样式的问题；

const HomeWrapper = styled.div`
  color: ${props => props.color};
}

添加attrs属性

const HYInput = styled.input.attrs({
  placeholder: "请填写密码",
  paddingLeft: props => props.left || "5px"
})`
  border-color: red;
  padding-left: ${props => props.paddingLeft};

  &:focus {
    outline-color: orange;
  }
`

2.2.4. styled高级特性

支持样式的继承

编写styled组件

const HYButton = styled.button`
  padding: 8px 30px;
  border-radius: 5px;
`

const HYWarnButton = styled(HYButton)`
  background-color: red;
  color: #fff;
`

const HYPrimaryButton = styled(HYButton)`
  background-color: green;
  color: #fff;
`

按钮的使用

<HYButton>我是普通按钮</HYButton>
<HYWarnButton>我是警告按钮</HYWarnButton>
<HYPrimaryButton>我是主要按钮</HYPrimaryButton>

styled设置主题

在全局定制自己的主题，通过Provider进行共享：

import { ThemeProvider } from 'styled-components';

<ThemeProvider theme={{color: "red", fontSize: "30px"}}>
  <Home />
  <Profile />
</ThemeProvider>

在styled组件中可以获取到主题的内容：

const ProfileWrapper = styled.div`
  color: ${props => props.theme.color};
  font-size: ${props => props.theme.fontSize};
`

2.3. classnames

vue中添加class

在vue中给一个元素添加动态的class是一件非常简单的事情：

你可以通过传入一个对象：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

你也可以传入一个数组：

<div v-bind:class="[activeClass, errorClass]"></div>

甚至是对象和数组混合使用：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

react中添加class

React在JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class：

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isActive: true
    }
  }

  render() {
    const {isActive} = this.state; 

    return (
      <div>
        <h2 className={"title " + (isActive ? "active": "")}>我是标题</h2>
        <h2 className={["title", (isActive ? "active": "")].join(" ")}>我是标题</h2>
      </div>
    )
  }
}

这个时候我们可以借助于一个第三方的库：classnames

很明显，这是一个用于动态添加classnames的一个库。

我们来使用一下最常见的使用案例：

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

我是@半糖学前端，专注前端技术领域分享，关注我和我一起学习，共同进步！

　React JS是一个功能强大的通用库，使开发人员能够构建复杂的web应用程序。遵循最佳实践对于编写可维护和可伸缩的React应用程序至关重要。对React 感兴趣的同学，可以参加Web前端培训，你可以学到更全面的知识和技能，提高应用开发工作效率。

　　文件夹结构

　　一个组织良好的文件夹结构可以在开发过程中产生显著的差异。将相关的组件、样式和实用程序分组在一起，可以更容易地查找和更新代码。

　　DRY原则(不要重复)

　　DRY原则主张避免代码重复。在React中，开发人员应该尽可能地重用组件和逻辑。

　　无状态功能组件

　　无状态功能组件，也称为功能组件或表示组件，是React中推荐的最佳实践。这些组件不维护状态，只通过props接收数据。通过使用无状态的功能组件，代码变得更加模块化，也更容易测试。

　　使用PropTypes

　　PropTypes是一个帮助对传递给组件的属性进行类型检查的库。通过指定预期的数据类型以及是否需要某些属性，开发人员可以发现错误并确保组件接收到正确的数据。

　　React中的高级样式

　　样式是创建吸引人的用户界面的一个重要方面。React提供了各种样式化组件的方法。在web前端培训学习中，有很多关于React 的课程学习，有一些实操项目的训练，可以帮助你将学到的理论知识应用到实践中去，真正掌握React 的使用。

　　CSS模块

　　CSS模块允许开发人员在他们的组件中编写模块化和限定范围的CSS。组件中定义的CSS规则仅适用于该特定组件，以防止意外的样式冲突。CSS模块增强了代码的可维护性，并使得在大型应用程序中管理样式变得更加容易。

　　样式组件

　　样式组件是一个流行的库，它使开发人员能够直接在他们的JavaScript代码中编写CSS。它使用带标签的模板文字来创建样式化组件。样式组件提供了一种更加动态和灵活的样式化方法，使得基于属性和状态管理组件样式变得更加容易。

　　反应状态管理

　　随着React应用程序变得越来越复杂，跨多个组件管理状态变得越来越具有挑战性。状态管理库可以帮助解决这个问题。

　　Redux

　　Redux是一个可预测的状态管理库，遵循Flux架构。它将应用程序的状态集中在一个存储中，并允许组件使用reducers和actions来访问和修改状态。Redux提供了清晰的关注点分离，简化了大型应用程序中的数据流。通过web前端培训，React 课程紧跟企业需求和市场需求，可以让你学到最新的知识和技能，提高自身竞争力。

　　MobX

　　MobX是另一个流行的状态管理库，它为管理状态提供了一种更加灵活和反应性更强的方法。它自动跟踪可观察对象之间的依赖关系，并在状态改变时更新组件。MobX以其简单性和易于与React应用程序集成而闻名。

　　带React的服务器端渲染(SSR)

　　服务器端呈现是一种用于在将React应用程序发送到客户端之前在服务器上呈现该应用程序的技术。这通过向搜索引擎提供完全呈现的HTML内容，改善了初始加载时间并增强了SEO。可以使用Next.js这样的库来实现SSR，这简化了React应用中实现服务器端渲染的过程。

　　React安全最佳实践

　　Web应用安全对于保护用户数据和防止攻击至关重要。React开发人员应该遵循这些最佳实践:

　　XSS预防

　　XSS是一种常见的安全漏洞，使得攻击者能够将恶意脚本注入网页。开发人员可以通过适当地净化用户输入和使用像DOMPurify这样的库来净化HTML来防止XSS攻击。React是前端常用的一个框架，想要学会这个框架的使用技能，建议报名参加Web前端培训，可以在短时间内获得较大提升。

　　CSRF保护

　　跨站点请求伪造(CSRF)是另一种安全威胁，它涉及攻击者诱骗用户在不知情的情况下在网站上执行操作。为了抵御CSRF攻击，开发人员应该使用CSRF令牌并实施严格的CORS策略。

　　React的未来

　　React还在继续发展，它的未来看起来很有希望。一些值得关注的趋势和发展包括：

　　反应并发模式：并发模式是一个即将到来的特性，它将允许React以一种更加渐进和可中断的方式执行呈现。这将带来更流畅的用户体验，尤其是对于具有复杂ui的应用程序。

　　React服务器组件：服务器组件旨在将服务器端渲染提升到一个新的水平。它们将允许开发人员将组件渲染卸载到服务器，从而加快加载速度。

　　改进的反应性能：React团队一直致力于优化React的性能，使其更快、更高效。

　　结论

　　通过遵循最佳实践，开发人员可以创建可伸缩、可维护、高性能的React应用程序，提供卓越的用户体验。在Web前端培训中，也有关于React的学习和使用，理论知识结合实战操作，学以致用，真正掌握前端技术。

在线咨询

上一篇：html教程入门的a标签使用方法，帮你理清逻辑，入门就是快
下一篇：微信小程序开发记账应注册与登录基于Codeigniter3

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商