react学习笔记（2）

最新推荐文章于 2024-06-20 16:44:51 发布

南太平洋_99

最新推荐文章于 2024-06-20 16:44:51 发布

阅读量372

点赞数

分类专栏： react webpack学习笔记

本文链接：https://blog.csdn.net/heyue_99/article/details/62237605

版权

react webpack学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

总结

Component：React最大的好处就是组件编程，组件可以嵌套和循环。

JSX：JSX is a JavaScript syntaxextension that looks similar to XML. 可以在JS里写HTML，然后又不是纯粹的HTM，,里面还可以嵌一些变量，表达式之类的。当然不用JSX也是可以写的，但读起来就比较累了，不那么直观，不像JSX那样，能够看到整个组件的HTML结构。怎么说呢，历史总是不断的重复却又不只是简单的重复，刚开始的时候，所有东西写在一起，后来分开，现在又整到一起了。这里有个要注意的地方，由于HTML里的class、for等属性是JS里的关键字，所以在JSX里需要用className、 forName代替。

Props：用来在组件间传递数据的，这里的数据传递是单向的，只能从父组件向子组件传递。

State：用来管理组件状态的，通过setState改变状态后，组件会自动调用render函数重新渲染。由于this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而this.state 是会随着用户互动而产生变化的特性。

render函数：这是React里面很关键的一个函数，这个里面就是用户写的组件的结构，用于渲染整个组件，在state发生改变后，该函数会被自动调用。

事件响应：组件内的事件响应很简单，比如鼠标点击事件，加个onClick={this.***}}然后在***里响应就可以了。但是如果父组件需要知晓子组件的事件怎么办呢，父组件可以通过props传递个callback函数给子组件，这样就可以处理子组件的事件了

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <style type="text/css">
	table{ border-collapse: collapse; border: 1px solid #000; width: 600px; margin: 20px auto; }
	th,td{ border: 1px solid #000; }
	tbody .active{ background-color: skyblue; }
    </style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var namelist=[
{
	id: 1,
	name: "Emma",
	gender: "female"
},
{
	id: 2,
	name: "Jerry",
	gender: "male"
},
{
	id: 3,
	name: "Loura",
	gender: "female"
}
];

var Bodylist = React.createClass({
    getInitialState: function(){
	return {ischecked:false};
    },

    toggle: function(e){
	this.setState({ ischecked:e.target.checked });
    },

    render: function(){
	return(
	    <tbody>
		<tr className={this.state.ischecked ? 'active' : ''}>
		    <td>{this.props.user.name}</td>
		    <td>{this.props.user.gender}</td>
		    <td><input type="checkbox" onClick={this.toggle} /></td>
		</tr>
	    </tbody>
	);
    }
});

var Toplist = React.createClass({
	render: function(){
	    return(
		<table>
		    <caption>组件的嵌套</caption>
		    <thead>
			<tr><th>name</th><th>gender</th></tr>
		    </thead>
		    {
			namelist.map(function(user){
			    return(<Bodylist user={user} key={user.id} />);
			})
					}
		</table>
	);
    }
});

ReactDOM.render(
    <Toplist/>,
    document.getElementById("example")
)
</script>
</body>
</html>

namelist模拟后台的数据传递到虚拟dom中，组件嵌套使用，通过tihis.state.{***}传递表格某一行是否被勾选的状态，如果被勾选，对应行背景为蓝色

南太平洋_99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react学习笔记（2）

table{ border-collapse: collapse; border: 1px solid #000; width: 600px; margin: 20px auto; } th,td{ border: 1px solid #000; } tbody .active{ background-color: skyblue; } var namelist=[{ i
复制链接

扫一扫