react组件起步

最新推荐文章于 2024-08-23 09:29:23 发布

乔木木木木

最新推荐文章于 2024-08-23 09:29:23 发布

阅读量99

点赞数

分类专栏： #react 文章标签： react

本文链接：https://blog.csdn.net/qq_43005779/article/details/107399350

版权

#react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

react组件编程

组件的基本定义和使用

分两步：

step1：定义组件

定义组件两种方法：

使用函数的形式定义组件，函数返回一个虚拟Dom对象
使用ES6类组件

step2：渲染组件标签

例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_component_state</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
 // step1 定义组件
 // 方法1 工厂函数组件
 function MyComponent1(){
	 return <h2>工厂函数组件</h2>
 }
 // 方法2 ES6类组件
 class MyComponent2 extends React.Component{
	 render(){
		 return <h2>类组件</h2>
	 }
 }
 // step2 渲染组件
 ReactDOM.render(<MyComponent1/>,document.querySelector('#example1'))
 ReactDOM.render(<MyComponent2/>,document.querySelector('#example2'))
</script>
</body>
</html>

组件的三大属性：state

state是组件对象最重要的属性，值是对象（可以包括多个数据），组件被称为状态机，通过更新组件的state老更新对应的页面来显示（重新渲染组件）

1、初始化状态

this.state={
				 isLike:false
			 }

2、读取某个状态值

const isLike=!this.state.isLike
this.setState({isLike})

3、更新状态–>组件界面更新

<h2 onClick={this.handleClick}>{isLike?'我喜欢你':'你喜欢我'}</h2>

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>component_state</title>
</head>
<body>

<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
  /*
  需求: 自定义组件, 功能说明如下
    1. 显示h2标题, 初始文本为: 你喜欢我
    2. 点击标题更新为: 我喜欢你
  */
 class Like extends React.Component{
	 // 初始化状态
	 constructor(props) {
			// 这里是固定的，这是在调用父类的构造函数
	     super(props)
			 // 初始化状态，状态可以是一个对象
			 this.state={
				 isLike:false
			 }
			 // 将新增函数的this强制绑定为组件对象
			 // this.handleClick=this.handleClick.bind(this)
	 }
	 
	 handleClick=()=>{
		 // 得到状态然后取反
		 console.log(this)
		 const isLike=!this.state.isLike
		 // 更新状态
		 this.setState({isLike})
	 }
	 // 这个方法是自己新添加的方法，内部的this默认不是组件对象，而是undefined
	 // handleClick(){
		//  // 得到状态然后取反
		//  console.log(this)
		//  const isLike=!this.state.isLike
		//  // 更新状态
		//  this.setState({isLike})
	 // }
	 
	 //真正的组件内容在这里,在这里读取state中的值
	 render(){
		 // 解构赋值，把state中的isLike变量拿出来
		 const {isLike}=this.state
		 // 处理事件，onClick
		 return <h2 onClick={this.handleClick}>{isLike?'我喜欢你':'你喜欢我'}</h2>
	 }
 }
 ReactDOM.render(<Like/>,document.querySelector('#example'))
</script>
</body>
</html>