React学习1——核心概念_react actionlink

ReactDOM.render(
	<h1>Hello World!</h1>,
	document.getElementById('root')
);

2. JSX

JSX直观印象：<h1>ello, {name} !</h1>或者 <Welcome name="vivian" />

• JSX表示对象（React 元素），JSX等价于React.createElement()函数调用

// 以下两种代码完全等价
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement( // 会创建出一个对象
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

• JSX是一个表达式：可以将JSX赋值给变量、可以作为入参出参。
• 可以在JSX中嵌入表达式，通过大括号{}的形式

// JSX作为变量
const element = <img src={user.avatarUrl} />;
const element = <div tabIndex="1">hhh</div>;
// 函数中返回JSX
function fun() {
	return <h1>hhh</h1>;
}

3. 元素渲染

按照自己的理解，React元素相当于JSX，直观理解：<h1>ello, {name} !</h1>或者 <Welcome name="vivian" />

<div id="root"></div>是根节点，该节点内的内容将由React DOM管理，将React元素渲染到根节点中：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

React 元素是不可变的，一旦被创建，你就无法更改它的子元素或者属性。因此，想要更新UI只能重新渲染，即再次执行ReactDOM.render()（当然不止这种方式，class组件中的render也是）。注意每一次执行ReactDOM.render()，React
DOM会只更新变化的部分（只进行必要的更新）。

4. 组件 & Props

组件：传入props，传出React元素

函数组件

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

class组件

class Welcome extends React.Component {
	render() {
		return <h1>Hello, {this.props.name}</h1>;
	}
}

• 组件名称必须以大写字母开头
• 纯函数定义：不会更改入参，且多次调用下相同入参始终返回相同的结果。
• 所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

5. State & 生命周期

• state：class组件私有属性，可以通过setState()来进行变更
• 生命周期函数：componentDidMount，componentWillUnmount

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  // 组件已经被渲染到 DOM 中后运行
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  // 组件被删除的时候运行
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

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

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  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
<button onclick="activateLasers()">
  Activate Lasers
</button>
// React
<button onClick={activateLasers}>
  Activate Lasers
</button>

//阻止默认行为：在React中不能通过返回false的方式，必须显式使用preventDefault
//传统的HTML
<a href="#" onclick="console.log('The link was clicked.'); return false">
  Click me
</a>
// React
function ActionLink() {
  function handleClick(e) { //e 是一个合成事件
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

如何正确绑定事件

法一：直接在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 (
      // 法一：
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

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

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

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

法三（在公司里最常用）：在回调中使用箭头函数。
此语法问题在于每次渲染 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
      </button>
    );
  }
}

向事件传递参数

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

7. 条件渲染

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

// if
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}
// &&
render() {
  return (
    {unreadMessages.length > 0 && <h1>hhh</h1>}
   )
}
// 三目运算符
render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

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

我特地针对初学者整理一套前端学习资料

ed in.

);
}

### 最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『**难的不会，会的不难**』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**我特地针对初学者整理一套前端学习资料**

[外链图片转存中...(img-YaofqN5M-1714323250953)]

![vue.js的36个技巧](https://img-blog.csdnimg.cn/img_convert/fe1d6b65271936cb59e0698a438ec755.webp?x-oss-process=image/format,png)