React基本概念

最新推荐文章于 2022-02-23 12:56:17 发布

xuxinhanan

最新推荐文章于 2022-02-23 12:56:17 发布

阅读量243

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_51061303/article/details/117285839

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JSX

先看以下代码：

	const element = <h1>Hello, world!</h1>;

这种在JS中写标签的语法叫JSX-JavaScript XML
它既不是字符串也不是HTML
本质上是 React.createElement ( ) 的语法糖，最终产生一个JS对象
这些对象被称为 “React元素”
因为它产生一个JS对象，因此可以通过引号或者大括号来指定属性

	const element = <div tabIndex="0"></div>;
	const element = <img src={user.avatarUrl}></img>;

基本语法规则：

遇到< >开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签则需要特别解析
遇到{ }开头的代码，以JS语法解析，且标签中的 js 表达式必须用 { } 包含

元素

元素描述了你在屏幕上想看到的内容
与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象
React通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新
React元素是不可变对象。一旦被创建，就无法更改他的子元素或者属性
想要更新UI唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render ( )
渲染元素：
想要将一个 React 元素渲染到根 DOM 节点中，只需要把它传入 ReactDOM.render ( ) 里

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

组件

由于元素没有办法传递参数，为了解决这个问题引入组件。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即“props”），并返回用于描述页面展示内容的 React 元素（实现界面局部功能的代码和资源的集合）。

函数组件

	function Welcome(props) {
	  return <h1>Hello, {props.name}</h1>;
	}
	ReactDOM.render(<Welcome/>,document.getElementById('root'));

执行了ReactDOM.render（）后，发生了什么？

React解析组件标签，找到了 Welcome
发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面上。

class 组件

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

执行了ReactDOM.render（）后，发生了什么？

React解析组件标签，找到了 Welcome
发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
将render返回的虚拟DOM转为真实DOM，随后呈现在页面中

渲染组件

	function Welcome(props) {
	  return <h1>Hello, {props.name}</h1>;
	}
	//创建对象，并指定属性
	const element = <Welcome name="Sara" />;
	ReactDOM.render(
	  element,
	  document.getElementById('root')
	);