react近期总结

最新推荐文章于 2022-06-10 09:15:00 发布

神以灵

最新推荐文章于 2022-06-10 09:15:00 发布

阅读量227

点赞数

分类专栏：【react.js】文章标签： react

本文链接：https://blog.csdn.net/juzipidemimi/article/details/74780135

版权

【react.js】专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇文章仅用于本人对于react知识的总结,只包含了一些基础知识，若出现错误请在评论中告知我（我也是正在学习中），文章内容我会在后面继续更改和添加,更多详细内容可以查看菜鸟教程或者官方文档

####1.JSX
JSX是一个js的语法扩展，它被写出来供React使用，他不是合法的js，浏览器不能识别它。但是它会被JSX编译器编译成正规的js代码。

<h1>Hello World</h1>; //在React中这是一个JSX元素，不是html元素

唯一显而易见的不同是你会在一个js文件中发现它。JSX元素会像js表达式一样被对待，他们可以放在任何js表达式可以放置的位置，这就意味着一个JSX元素可以被存储在一个变量中，传递给一个函数，存储在一个对象或者数组中，等等。。。
JSX元素拥有属性，就像HTML元素一样，并且可以给JSX中的元素添加自定义属性，添加自定义属性需要使用data-前缀。就像这样：

<p data-myattribute = "somevalue">hello world</p>;

你也可以将一个JSX元素放置到另一个JSX元素里面,但是对于多行的JSX表达式，你应该讲他放置到括号里();一个JSX表达式必须刚好最外面有一个元素。例如下面这种写法是错误的：

<p>i am a paragraph</p>
<p>i am another paragraph</p>

你需要用一个div标签将他包裹：

<div>
<p>i am a paragraph</p>
<p>i am another paragraph</p>
</div>

在JSX中，你必须使用className替代class.
当你写一个单标签时必须包含一个斜线。例如img:

<img />

在JSX表达式中，每一个被放在花括号里的事物都会像一个正规的JS表达式被对待。
JSX元素也可以拥有事件监听，就像HTML元素一样。一个事件监听属性名字应该像onClick或者onMouserover：一个on再加上事件类型，并且事件名称应该使用驼峰法命名。这里有react中的事件。
在JSX表达式中，你不能使用if else语句，但是你可以使使用三元运算符。

####2.组件
React的应用都是由组件组成，一个组件是一个可重复使用的代码块，为了某一个工作，这个工作经常去渲染一些HTML。需要注意的是 html元素名以小写开头，而自定义的react组件都是以大写开头。每一个组件必须使用react.createClass创建，它就像一个创建components的工厂。如果你有一个componnet类，那你就可以使用它去生产任意个实例组件，只要你想。react.createClass的参数必须是一个js对象，这个对象只有一个属性你必须设置：一个render函数,当然还可以有其他属性。同时，我们很多时候需要给组件传递参数，参数写在实例中，在组件类中用 this.props.+参数名 获得。

####3.state
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。其中：getInitialState方法用于定义初始状态，也就是一个对象；this.state用于获取这个对象；this.setState方法用于修改状态值，每次修改以后，自动调用this.render方法再次渲染组件.

####4.props
state可变，props不可变。大多数使用props是在组件之间传递信息，它是一个对象名，这个对象存储着传递的信息，在组件类中可以使用this.props.+名称获得对象中的属性。。

####5.实例

最后我自己写了个实例方便理解上面提到的几个东西

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>react test</title>
	</head>
	<style>
		#example{
			text-align: center;
		}
	</style>
	<body>
		<div id="example"></div>
		
		<!--先导入几个必要的js库-->
		<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
		<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
		<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
		<script type="text/babel">
			var MyName = React.createClass({
				render:function(){
					return <p>my name is {this.props.name}</p>;
				}    //总结一个错误：我总爱在这后面加一个 ； 符号，一旦写了一个符号就会出错
			});
			var MyHobby = React.createClass({
				render:function(){
					return <p>I like playing {this.props.hobby}!</p>;
				}
			});
			var Who = React.createClass({
				getInitialState:function(){
					return {change:true};
				},
				eClick:function(){
					this.setState({change:!this.state.change});
				},
				render:function(){
					var name = this.state.change ? 'jzx' : 'sst';
					return (
						<div>
							<p onClick={this.eClick}>who is {name}?</p>  {/*这里的点击事件不能写成onClick="this.eClick"---标签内注释需要写在大括号里*/}
							<MyName name={name} />
							<MyHobby hobby={this.props.hobby} />
						</div>
					);
				}
			});
			
			ReactDOM.render(
				<Who hobby="game" />,
				document.getElementById("example")  //这里最后也不能加 ; 符号，我总是惯性的加上
			);
		</script>
	</body>
</html>

梳理下上面的代码的逻辑，先声明了三个组件类，前两个组件类各返回一个p标签，表明一个人的名字和爱好，名字和爱好都是在实例中传递给他们的，使用this.props. 获取。第三个组件类较复杂一点，主要是在render函数中实例化了前面两个组件类，并传递了信息给他们，并且设置了初始化状态函数和点击事件函数，当点击事件触发，就改变组件的change状态，由于组件render函数中某一部分内容是根据change状态的值来渲染的，所以当点击事件发生时，渲染的内容也会产生改变，大致就是这么回事了~~~

如果发现错误，请在评论中告诉我，谢谢！！！

神以灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react近期总结

这篇文章仅用于本人对于react知识的总结,只包含了一些基础知识，若出现错误请在评论中告知我（我也是正在学习中），文章内容我会在后面继续更改和添加,更多详细内容可以查看菜鸟教程或者官方文档1.JSXJSX是一个js的语法扩展，它被写出来供React使用，他不是合法的js，浏览器不能识别它。但是它会被JSX编译器编译成正规的js代码。<h1>Hello World</h1>; //在
复制链接

扫一扫