2024年前端最全前端入门之React入门指南，2024年最新前端后端社招面试经历

基础面试题

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

3. 启动项目

cd react-demo

npm run start

4. 启动成功

React必备基础知识

---

JSX

我们来看一下如下代码：

const element =

Hello, world!

========================================================================

;

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，事实上它具有 JavaScript 的全部功能。

JSX表达式怎么写？

1. 普通渲染

我就是jsx

2. 数学表达式

{1 + 1}

3. 字符串

{'hello world'}

4. bool类型-无法渲染

{isBoy}

5. 使用变量

{msg}

6. 三目运算符

{isBoy ? "男生" : "女生"}

7. 调用方法

const format = (msg) => {

return ‘—’ + msg + ‘—’;

}

{format(msg)}

8. 使用对象

const lamian = {

name: “拉面”

};

{lamian.name}

JSX嵌套语法与循环

import React from ‘react’;

import ReactDOM from ‘react-dom’;

const list = [‘苹果’, ‘香蕉’, ‘雪梨’, ‘西瓜’];

const App = () => {

return (

{

{

list.map(v =>

{v}

) // 遍历数组

}

}

)

}

ReactDOM.render(, document.getElementById(‘root’))

JSX标签属性

jsx标签上可以设置绝大部分html标签的属性，如 checked、图片的src等，但需要注意几个点：

1. html的class属性改为className

👍💯☁️

2. html中label标签的for属性改为htmlFor

点我点我

3. 标签中的自定义属性使用data

自定义属性

4. 渲染 html字符串 使用 dangerouslySetInnerHTML 属性

• 来啊呀"}}>
• 5. bool类型的值 可以这样用
  6. 当属性太多了，可以使用 … 扩展运算符

  const props={

  className:“redCls”,

  “data-index”:5

  }

  7. 行内样式的写法

  tips: 在vscode上安装插件：vscode-styled-jsx，高亮jsx代码，提高编程体验。

  组件的创建

  在react中，组件分为两种，类组件 和 函数式组件

  1. 简单功能 使用 函数式组件

  2. 复杂功能 使用 类组件

  3. 组件名都必须大写

  类组件

  使用ES6创建Class的方式来实现一个组件类

  • 首字母要大写

  • 要继承 React中的Component类

  • 必须实现render函数，函数内返回标签

  • 组件有自己的state和生命周期

  import React,{Component} from ‘react’;

  import ReactDOM from ‘react-dom’;

  import “./index.css”;

  class App extends Component {

  render() {

  return (

  嘿嘿嘿

  )

  }

  }

  ReactDOM.render(, document.getElementById(‘root’))

  函数式组件

  也叫做无状态组件，简单功能的组件可以使用函数式组件，性能更高。

  函数式组件其实就是一个函数，只不过函数内部需要返回对应的标签

  • 首字母要大写

  • 函数内要返回标签

  import React from ‘react’;

  import ReactDOM from ‘react-dom’;

  import “./index.css”;

  const App = () => {

  return (

  简单的函数式组件

  )

  }

  ReactDOM.render(, document.getElementById(‘root’))

  小结

  • 函数式组件性能更高，因为没有生命周期

  • 函数式组件更方便进行测试

  • 能不用类组件就不用类组件

  • 当要使用 state 时，就要使用类组件

  状态和属性

  在React中，用状态(state)和属性(props)来实现数据动态化。下面分别来讲讲这两个概念。

  状态：state

  怎么理解state？

  • 在react中，组件内部的数据是通过state来实现和管理

  • 可以理解为state就是Vue中的data

  为什么需要state？

  我们之前使用变量，都是脱离了组件本身。而组件自身是应该具有私有和独立的数据（状态）的，这个私有的数据和状态就叫做 state，以后，只要说到数据的状态 那么就是指类组件中的state

  ⚠️：函数式组件没有自己的state

  state的声明和使用（两种方式）

  1. 类属性的方式声明

  class Person extends Component {

  // 1 声明 state

  state = {

  date: “2021”,

  msg: “你好”

  }

  render() {

  return (

  {/* 2 使用state */}

  {this.state.date}

  {this.state.msg}

  )

  }

  }

  2. 构造函数中声明

  class Person extends Component {

  // 1 构造函数中 声明 state

  constructor() {

  // 1.1 必须在this之前调用super()方法

  super();

  this.state = {

  date: “2009”,

  msg: “天啊天啊”

  }

  }

  render() {

  return (

  {/* 2 使用state */}

  {this.state.date}

  {this.state.msg}

  )

  }

  }

  state的赋值（注意区别赋值和声明）

  • state的赋值方式只能通过 this.setState方法 来实现。

  需要注意的是， 不能 使用 this.state.date= 200 直接修改，否则会报错。

  • state的赋值是异步的。

  react为了优化性能，将state的赋值代码 改成异步的方式，可以避免反复的设置state而引发的性能损耗问题。

  怎么体现？看看下面打印的值

  class Person extends Component {

  state = {

  date: 2010

  }

  handleClick = () => {

  最后前端到底应该怎么学才好？

  如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。

  不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

  

  

  描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)