2024年Web前端最全React学习1——核心概念_react actionlink，我的华为面试经历分享

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

tick() {
this.setState({
date: new Date()
});
}

render() {
return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

);
}
}

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

### 使用setState注意点


* state的更新是合并的。
* state的更新可能是异步的，不要依赖this.state和this.props来更新下一个状态

// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((state, props) = ({
counter: state.counter + props.increment
}));

## 6. 事件处理


### React元素事件处理与传统HTML的区别

// 传统的HTML

Activate Lasers

// React

Activate Lasers

//阻止默认行为：在React中不能通过返回false的方式，必须显式使用preventDefault
//传统的HTML

Click me

// React
function ActionLink() {
function handleClick(e) { //e 是一个合成事件
e.preventDefault();
console.log(‘The link was clicked.’);
}

return (

Click me

);
}

### 如何正确绑定事件


法一：直接在constructor上绑定这个事件

class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};

//法一： 为了在回调中使用 `this`，这个绑定是必不可少的，如果没有绑定，则在调用这个函数的时候this的值为undefined
this.handleClick = this.handleClick.bind(this);

}

handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}

render() {
return (
// 法一：

{this.state.isToggleOn ? ‘ON’ : ‘OFF’}

);
}
}

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

法二：使用 class fields 正确的绑定回调函数

class LoggingButton extends React.Component {
// 此语法确保 handleClick 内的 this 已被绑定。
// 注意: 这是 *实验性* 语法。
handleClick = () => { // 在此处使用了箭头函数
console.log(‘this is:’, this);
}

render() {
return (

Click me

);
}
}

法三（在公司里最常用）：在回调中使用箭头函数。  
 此语法问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。

class LoggingButton extends React.Component {
handleClick() {
console.log(‘this is:’, this);
}

render() {
// 此语法确保 handleClick 内的 this 已被绑定。
return (
// 使用箭头函数
<button onClick={() => this.handleClick()}>
Click me

);
}
}

### 向事件传递参数

// 在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row
<button onClick={this.deleteRow.bind(this, id)}>Delete Row

## 7. 条件渲染


* `if`
* `&&`
* 三目运算符: `condition ? true : false`。

// if
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return ;
}
return ;
}
// &&
render() {
return (
{unreadMessages.length > 0 &&

hhh

}
)
}
// 三目运算符
render() {
const isLoggedIn = this.state.isLoggedIn;
return (

The user is {isLoggedIn ? ‘currently’ : ‘not’} logged in.

);
}

## 8. 列表 & Key


* key帮助React识别哪些元素改变了，比如被添加或删除。不是作为属性传递。
* key值需要在该数组中独一无二，一般选用元素的id，不建议使用索引来作为key值，因为项目的顺序可能发生变化，导致一些问题。
* 一个好的经验法则是：在`map()` 方法中的元素需要设置 key 属性。

function NumberList(props) {
const numbers = props.numbers;
// 使用map渲染一个列表，注意需要添加key
const listItems = numbers.map((number) =>

• 
  {number}
  
• 
  );
  return (
  
  • {listItems}
  
  );
  }

  const numbers = [1, 2, 3, 4, 5];
  ReactDOM.render(
  ,
  document.getElementById(‘root’)
  );

  
  ## 9. 表单
  
  
  ### 受控组件
  
  
  * 受控组件：state是表单输入元素的唯一数据源，控制着用户输入过程中表单发生的操作。
  
  
  
  

  class NameForm extends React.Component {
  constructor(props) {
  super(props);
  this.state = {value: ‘’};

  this.handleChange = this.handleChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
  

  }

  handleChange(event) {
  this.setState({value: event.target.value});
  }

  handleSubmit(event) {
  alert('提交的名字: ’ + this.state.value);
  event.preventDefault(); // 阻止系统默认行为：提交表单后浏览新页面
  }

  render() {
  return (
  
  
  名字:
  //input的数据展示来源于state，当输入内容改变时，也会更改state并展示出来，这就是受控组件
  
  
  
  
  );
  }
  }

  
  * input标签
  
  
  
  

  
  当需要处理多个 input 元素时，我们可以给每个元素添加 `name`属性，并让处理函数根据 `event.target.name`的值选择要执行的操作。
  
  
  * textarea标签
  
  
  
  

  ``` * select标签 ``` 葡萄柚 酸橙 椰子 芒果 // 多选