1.组件基础理解和使用
-
函数式组件
执行了ReactDOM.render之后，
1.react解析组件标签，找到了Demo组件
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM，随后渲染真实DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<!--准备一个容器-->
<div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
// 1.创建函数式组件 函数名首字母必须大写
function Demo(){
// 此处的this是undefined,因为Babel编译后开启了严格模式
console.log(this)
return <h2>我是用函数定义的组件，我适用于简单组件的定义</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>
注意点：函数名一定要大写，小写的话他就去找html中的标签去了，而且标签一定要闭合
-
类式组件
执行了ReactDOM.render之后，
1.react解析组件标签，找到了Demo组件
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法
3.将render返回的虚拟DOM转换为真实DOM，渲染真实DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<!--准备一个容器-->
<div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
// 1.创建类式组件
class Demo extends React.Component{
// render方法是放在Demo类的原型对象上，供实例使用
render(){
// render中的this是--Demo类的实例对象 也叫Demo组件实例对象
console.log('render中的this',this)
return <h2>我是用类定义的组件，我适用于复杂组件的定义</h2>
}
}
// 2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>
有状态的是复杂组件，没有状态的是简单组件
2.组件实例的三大核心属性--state
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<!--准备一个容器-->
<div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
// 1.创建类式组件
class Demo extends React.Component{
constructor(props){
super(props)
// 初始化状态
this.state = {isHot:true,wind:'风'}
// 解决changeWeather的this指向问题
// this.changeWeather = this.changeWeather.bind(this)
}
render(){
console.log(this.state)
return <h2 onClick={this.changeWeather.bind(this)}>今天的天气很{this.state.isHot ? '炎热' : '不热'},没有{this.state.wind}</h2>
}
changeWeather(){
// changeWeather在Demo类的原型对象上，供实例使用
// 由于changeWeather是作为onclick的回调，所以this.changeWeather不是通过实例调用的，是直接调用
// 类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
// 需要使用.bind(this)
console.log('点击成功',this)
// 状态不可直接更改，需要借助一个内置的api去更改
// this.state.isHot = !this.state.isHot
this.setState({isHot:!this.state.isHot})
}
}
// 2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>
3.state的简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.5.0/umd/react.development.js"></script>
<!-- 引入react-dom用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.5.0/umd/react-dom.development.js"></script>
<!-- 引入babel用于ES6转ES5，jsx 转 js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<!--准备一个容器-->
<div id="test"></div>
</body>
<!-- 注意这里一定要添加babel，表示这里写的是jsx，用babel翻译为js-->
<script type="text/babel">
// 1.创建类式组件
class Demo extends React.Component{
// 初始化状态
state = {isHot:true,wind:'风'}
render(){
return <h2 onClick={this.changeWeather}>今天的天气很{this.state.isHot ? '炎热' : '不热'},没有{this.state.wind}</h2>
}
// 自定义方法--要用赋值语句的形式+箭头函数
changeWeather = ()=>{
this.setState({isHot:!this.state.isHot})
}
}
// 2.渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</html>
箭头函数的this指向他的外面一层
4.state总结
state是组件对象最重要的属性，组件被称为“状态机”，通过更新组件的state来更新对应页面显示，重新渲染组件
- 组件中render方法中的this为组件实例对象
- 组件自定义方法中this为undefined
- 强制绑定this：通过函数对象的bind()
- 箭头函数
- state属性不能直接修改，需要使用setState()
