2024年前端入门之React入门指南，面试必知必会

后话

---

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

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

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 = () => {

  let { date } = this.state;

  // 1 修改state中的日期 增加 2000

  this.setState({

  date: date + 2000

  });

  // 2 看看这个date是多少

  console.log(this.state.date);

  }

  render() {

  return (

  {this.state.date}

  )

  }

  }

  有时候，我们希望在一设置值的时候，就希望马上得到最新的state的值，那么可以将代码改为下列的写法

  给setState添加一个回调函数，回调中可以获取到修改后最新的state的值

  class Person extends Component {

  state = {

  date: 2008

  }

  handleClick = () => {

  let { date } = this.state;

  // 添加一个回调函数

  this.setState({

  date: date + 3000

  }, () => {

  // date的值为 3008

  console.log(this.state.date);

  });

  }

  render() {

  return (

  {this.state.date}

  )

  }

  }

  有时候，setState还可以接收一个函数，函数内可以实时获取state中的值，不存在延迟

  this.setState(preState => {

  console.log(“上一次的state”, preState.date);

  return {

  date: preState.date + 1000

  }

  })

  this.setState(preState => {

  console.log(“上一次的state”, preState.date);

  return {

  date: preState.date + 1

  }

  })

  属性 props

  props意思是属性，一般存在父子组件中。主要用于 父向子传递数据。

  最后

  小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

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

  

  

  虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！