目录
第一部分：初识reac
第二部分：初识组件
第三部分：受控与非受控组件
第四部分：高阶函数
第五部分：常用钩子函数的应用
第一部分：初识react
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><div id="root">
</div>
<!-- 引入react核心库 -->
<script src="js/react.development.js"></script>
<!-- 引入react扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- 引入bable解析 -->
<script src="js/babel.min.js"></script>
<script type="text/babel">
// 第一种写法创建虚拟dom
//注意事项：react中的dom必须要大写，严格区分大小写以及react首字母均是大写
// const v_DOM = React.createElement('h1',{id:'001'},React.createElement('p',{},'Hello!'))
// ReactDOM.render(v_DOM,document.getElementById('root'))
//jsx创建虚拟dom
// let str = "hello react!"
// const v_DOM = (
//react必须要有一个根目录
// <div>
// <h1 className="demo" style={ {'fontSize':'20px'}}>你好,{str}</h1>
// </div>
// )
// ReactDOM.render(v_DOM,document.getElementById('root'))
//遍历数组到页面上
const person = [
{realname:'张三',age:20},
{realname:'李四',age:23}
]
const v_DOM = (
//react必须要有一个根目录
<ul>
{
// 若要遍历必须在这里加一个{}才可以在里面进行遍历
person.map((item,index)=>{
// 切记这里有一个返回值
return <li key={index}>姓名:{item.realname},年龄:{item.age}</li>
})
}
</ul>
)
ReactDOM.render(v_DOM,document.getElementById('root'))
</script></body>
</html>
初识react：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btn {
background-color: #ff557f;
color: aliceblue;
font-size: 20px;
}.hove {
background-color: chocolate;
color: aliceblue;
font-size: 20px;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- react核心库 -->
<script src="./js/react.development.js"></script>
<!-- react扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- react解析 -->
<script src="js/babel.min.js"></script><script type="text/babel">
class IsLike extends React.Component{// 数据存储部分
state={
flag:true,
age:20
}//点击事件 这里是对数据进行取反并修改state内部的flag值
changeblack=()=>{
// this.state.flag = ! this.state.flag
this.setState({flag:!this.state.flag})
}//对数据进行处理
render(){//解构
const {flag} = this.state;
return(
<div>
<button className={flag?"btn":"btn hove"} onClick={this.changeblack}>{flag?"喜欢":"不喜欢"}</button>
</div>
)
}
}
ReactDOM.render(<IsLike/>,document.getElementById("root"))
</script>
</body>
</html>
第二部分：初识组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><div id="root"></div>
<!-- 核心库 -->
<script src="js/react.development.js"></script>
<!-- 扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- 解析 -->
<script src="js/babel.min.js"></script><script type="text/babel">
//函数组件和传参
// function HelloWorld(props){
// return <div>Hello,{props.name}</div>
// }
// ReactDOM.render(<HelloWorld name="你好呀"/>,document.getElementById("root"))
// 2：复杂组件
// function GetName(props){
// return <div>姓名:{props.realname}</div>
// }
// function GetAge(props){
// return <div>年龄:{props.age}</div>
// }
//归总
// function Preson(props){
// return(
// <div>
// <GetName realname={props.realname}/><GetAge age={props.age}/>
// </div>
// )
// }
//age={20}这里必须使用{} 否则就是字符型数据，加{} 之后就是数值型
// ReactDOM.render(<Preson realname="张三" age={20}/>,document.getElementById("root"))
// 类式组件
class Person extends React.Component{
render(){
return <div>Hello,react</div>
}
}
ReactDOM.render(<Person/>,document.getElementById("root"))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.btn {
background-color: #ff557f;
color: aliceblue;
font-size: 20px;
}
.hove {
background-color: chocolate;
color: aliceblue;
font-size: 20px;
}
</style>
</head>
<body>
<div id="root">
</div>
<!-- react核心库 -->
<script src="./js/react.development.js"></script>
<!-- react扩展库 -->
<script src="js/react-dom.development.js"></script>
<!-- react解析 -->
<script src="js/babel.min.js"></script>
<script type="text/babel">
class IsLike extends React.Component{
// state 是一个状态，存储数据
state={
flag:true,
age:20
}
changeblack=()=>{
// this.state.flag = ! this.state.flag
// 通过setState改变state内部的数据
this.setState({flag:!this.state.flag})
}
render(){
const {flag} = this.state;
return(
<div>
<button className={flag?"btn":"btn hove"} onClick={this.changeblack}>{flag?"喜欢":"不喜欢"}</button>
</div>
)
}
}
ReactDOM.render(<IsLike/>,document.getElementById("root"))
</script>
</body>
</html>
第三部分：受控与非受控组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="root"></div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script><script type="text/babel">
//非受控组件
class Preson extends React.Component{
ShowInfo=(e)=>{
e.preventDefault();//阻止默认行为 取消事件的默认动作
const realname = this.realname.value
const age = this.age.value
console.log(realname,age)
}
render(){
return(
<div>
<form action="http://www.baidu.com/" onSubmit={this.ShowInfo}>
<p><input type="text" placeholder="请输入姓名" ref={e=>this.realname=e}/></p>
<p><input type="text" placeholder="请输入姓名" ref={e=>this.age=e}/></p>
<button>点击提交</button>
</form>
</div>
)
}
}
ReactDOM.render(<Preson/>,document.getElementById("root"))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><div id="root">
</div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script><script type="text/babel">
class Person extends React.Component{
//创建一个空对象 在下面save...语句将数据保存到state中
state={}
ShowInfo=(e)=>{
e.preventDefault();//阻止默认行为 取消事件的默认动作
const {realname,age} = this.state
console.log(realname,age)
}
//保存姓名 jsx语法这样写必须要命名才可以 否则就要将数据传给一个变量 第一种写法
saveRealname=(e)=>{
this.setState({realname:e.target.value})
// console.log(realname)
}
//第二种写法
saveAge=(e)=>{
let age = e.target.value
this.setState({age})
}
render(){
return(
<div>
<form action="http://www.baidu.com/" onSubmit = {this.ShowInfo}>
<p><input type="text" placeholder="请输入姓名" onChange={this.saveRealname}/></p>
<p><input type="text" placeholder="请输入年龄" onChange={this.saveAge}/></p>
<button>点击提交</button>
</form>
</div>
)
}
}
ReactDOM.render(<Person/>,document.getElementById("root"));
</script>
</body>
</html>
第四部分：高阶函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body><div id="root">
</div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script><script type="text/babel">
class Person extends React.Component{
//将数据库存在state中
state={}
// 将数据输出的内容全部集中到该函数中 进行处理
ShowInfo=(e)=>{
e.preventDefault();//阻止默认行为
const {realname,age} = this.state
console.log(123)
console.log(realname,age)
}
// 高阶函数实现传值 dataType为类型 e指向的是当前的函数 第一种写法
// saveDate=(dataType)=>{
// return(e)=>{
// this.setState({[dataType]:e.target.value})
// }
// }
// 第二种写法 与上解释同理
saveDate=(dataType,e)=>{
this.setState({[dataType]:e.target.value})
}
render(){
return(
<div>
<form action="http://www.baidu.com/" onSubmit={this.ShowInfo}>
{
/*
这里的传给函数 这里携带的是类型
<p><input type="text" placeholder="请输入用户名" onChange={this.saveDate("realname")}/></p>
<p><input type="text" placeholder="请输入年龄" onChange={this.saveDate("age")}/></p>
*/
}
{
/*
这里是传给函数 这里携带的是类型 及 当前的e值
*/
}
<p><input type="text" placeholder="请输入用户名" onChange={e=>this.saveDate("realname",e)}/></p>
<p><input type="text" placeholder="请输入年龄" onChange={e=>this.saveDate("age",e)}/></p>
<button>提交数据</button>
</form>
</div>
)
}
}
ReactDOM.render(<Person/>,document.getElementById("root"))
</script>
</body>
</html>
第五部分：常用钩子函数的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.btn {
width: 100px;
height: 50px;
background-color: red;
border: 1px solid #0f0;
}
</style>
</head>
<body>
<div id="root">
</div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<script src="js/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component{
state={
x:0
}
//这里采用点击事件 清除组件
unmount=()=>{
//卸载组件的钩子 unmountComponentAtNode
ReactDOM.unmountComponentAtNode(document.getElementById("root"))
}
//这里是挂载组件
componentDidMount(){
// this.install这里必须要定义 否则无法在清除定时器中找到相关的定时器名称 定时器
this.install = setInterval(()=>{
let x = this.state.x
if(x>=100){
this.setState({x:0})
}else{
x+=20
this.setState({x})
}
},1000)
}
//清除组件 清除定时器
componentWillUnmount(){
clearInterval(this.install)
}
// 挂在组件
render(){
let x= this.state.x
return(
<div>
<div className="btn" style={
{"transform":`translateX(${x}px)`}}></div>
<button type="submit" onClick={this.unmount}>卸载组件</button>
</div>
)
}
}
ReactDOM.render(<Person/>,document.getElementById("root"))
</script>
</body>
</html>