您的位置：首页 > Web前端 > React

react组件起步

2020-07-17 02:54 363 查看

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>

这里有两种写法，一种是用普通的函数，这种情况下的this指向的是空，所以要用bind函数把this指向组件，还有一种是用箭头函数，因为箭头函数的this是通过上下文捕获的，所以会直接指向组件就不用bind绑定this和组件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航