简单介绍JSX语法和组件概念以及生命周期

JSX
image.png
React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号。JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖。

JSX的解析器会帮我们读取这种语法并加以处理。

下面是一个简单的例子。

其实相当于如下的代码:

第一个参数是类型,可以是HTML标签,也可以是React组件;第二个参数是props对象;第三个以后参数是children,会按照传入顺序依次排列。

当然第三个参数也可以传入数组,如果第三个参数传入数组,则后面再传入其他子节点,就会报错。

JSX提供了一种HTML和JS混合编写的能力。在需要使用JS表达式的地方,用一组花括号包裹起来即可:

由于class在js中关键字,所以使用className去替代。

上面说到了JSX其实是语法糖,所以如果要循环嵌入列表,可以直接将列表传进来:

```const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('app')
);

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.

const listItems = numbers.map((number, index) =>
<li key={index}>{number}</li>
);

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

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

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

import React, {Component} from 'react';
export default class Clock extends Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

import React, {Component} from 'react';
export default class Clock extends Component {
...
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID)
}
tick () {
this.setState({date: new Date()})
}
...
}

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

componentWillUnmount()

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复