React中JSX的理解 JSX是快速生成react元素的一种语法，实际是React.createElement(component, props, ...children)的语法糖，同时JSX也是J
React中JSX的理解
描述
JSX发展过程
$str = "<ul>";
foreach ($talks as $talk) {
$str += "<li>" . $talk->name . "</li>";
}
$str += "</ul>";
$content = <ul />;
foreach ($talks as $talk) {
$content->appendChild(<li>{$talk->name}</li>);
}
const content = (
<TalkList>
{talks.map(talk => <Talk talk={talk} />)}
</TalkList>
);
为何使用JSX
优点
-
快速，
JSX执行更快，因为它在编译为JavaScript代码后进行了优化。
- 安全，与
JavaScript相比，JSX是静态类型的，大多是类型安全的。使用JSX进行开发时，应用程序的质量会变得更高，因为在编译过程中会发现许多错误，它也提供编译器级别的调试功能。
- 简单，语法简洁，上手容易。
JSX实例
规则定义
-
JSX只能有一个根元素，JSX标签必须是闭合的，如果没有内容可以写成自闭和的形式<div />。
- 可以在
JSX通过{}嵌入Js表达式。
-
JSX会被babel转换成React.createElement的函数调用，调用后会创建一个描述HTML信息的Js对象。
-
JSX中的子元素可以为字符串字面量。
-
JSX中的子元素可以为JSX元素。
-
JSX中的子元素可以为存储在数组中的一组元素。
-
JSX中的子元素可以为Js表达式，可与其他类型子元素混用；可用于展示任意长度的列表。
-
JSX中的子元素可以为函数及函数调用。
-
JSX中的子元素如果为boolean/null/undefined将会被忽略，如果使用&&运算符，需要确保前面的是布尔值，如果是0/1则会被渲染出来。
- 在对象属性中定义
React组件，可以使用object的点语法使用该组件。
-
React元素会被转换为调用React.createElement函数，参数是组件，因此React和该组件必须在作用域内。
-
React元素需要大写字母开头，或者将元素赋值给大小字母开头的变量，小写字母将被认为是HTML标签。
- 不能使用表达式作为
React元素类型，需要先将其赋值给大写字母开头的变量，再把该变量作为组件。
JSX的使用
const name = "Josh Perez";
const element = <h1>Hello,{name}</h1>;
ReactDOM.render(
element,document.getElementById("root")
);
function getGreeting(user) {
if (user) {
return <h1>Hello,{formatName(user)}!</h1>;
}
return <h1>Hello,Stranger.</h1>;
}
const element1 = <div tabIndex="0"></div>;
const element2 = <img src={user.avatarUrl}></img>;
const element1 = <img src={user.avatarUrl} />;
const element2 = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
const title = response.potentiallyMalicIoUsInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
const element1 = (
<h1 className="greeting">
Hello,world!
</h1>
);
// 等价
const element2 = React.createElement(
'h1',{className: 'greeting'},'Hello,world!'
);
// 注意：这是简化过的结构
const element = {
type: 'h1',props: {
className: 'greeting',children: 'Hello,world!'
}
};
<div class="root" name="root">
<p>1</p>
<div>11</div>
</div>
// 使用Js对象去描述上述节点以及文档
{
type: "tag",tagName: "div",attr: {
className: "root"
name: "root"
},parent: null,children: [{
type: "tag",tagName: "p",attr: {},parent: {} /* 父节点的引用 */,children: [{
type: "text",tagName: "text",content: "1"
}]
},{
type: "tag",content: "11"
}]
}]
}
示例
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<title>JSX示例</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timer = setInterval(() => this.tick(),1000);
}
componentWillUnmount() {
clearInterval(this.timer);
}
tick() {
this.setState({ date: new Date() });
}
render() {
return (
<div>
<h1>{this.props.tips}</h1>
<h2>Now: {this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
class App extends React.Component{
constructor(props){
super(props);
this.state = {
showClock: true,tips: "Hello World!"
}
}
updateTips() {
this.setState((state,props) => ({
tips: "React update"
}));
}
changeDisplayClock() {
this.setState((state,props) => ({
showClock: !this.state.showClock
}));
}
render() {
return (
<div>
{this.state.showClock && <Clock tips={this.state.tips} />}
<button onClick={() => this.updateTips()}>更新tips</button>
<button onClick={() => this.changeDisplayClock()}>改变显隐</button>
</div>
);
}
}
var vm = ReactDOM.render(
<App />,document.getElementById("root")
);
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.zhihu.com/question/265784392
https://juejin.cn/post/6844904127013584904
https://zh-hans.reactjs.org/docs/introducing-jsx.html
总结
服务热线 19970861797
