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)