react是用来构建用户界面的JavaScript库
一、jsx语法
- 需要在{}写js表达式;
- 注释需要{/* 注释内容 */};
- className添加类名(代码展示如下)
import './App.css'
.active{
color: #f70;
}
<h1 className='active'> 你好, react </h1>
- 样式对象自动展开(代码展示如下)
var styles = {
fontSize : '48px',
textAlign:'center',
color:'green'
}
<p style={styles}>学好react,月薪过百万</p>
- 数组里面可以定义html标签,自动展开(代码展示如下)
var arr = [
<h2>我是老大</h2>,
<p>我就是个p标签</p>,
<a href='http://www.baidu.com'>百度一下</a>
]
{arr}
- 有且只有一个根节点
- html与js混合写法称为jsx
- jsx方便在js中嵌套heml模板,最终还是会被编译成js被浏览器识别
二、React的组件
1.函数组件
- 创建函数组件(代码展示如下)
function App() {
return <div>
</div>
}
export default App
2.类组件
- 创建类组件(代码展示如下)
import React, { Component } from 'react'
class App extends Component {
constructor(props){
super(props);
}
state = {num:5}
render(){
return ( <div>
</div>);
}
}
export default App;
3.类组件与函数组件的区别
- 函数组件通常展示,类组件通常作为容器
- 类组件可以有state管理数据,函数组件没有state
- 函数组件没有this,类组件有this
- 函数组件没有生命周期,类组件没有生命周期
三、模板语法
1.文本渲染
- 普通写法(代码展示如下)
- html文本写法
var str2 = "我起飞咯"
<div dangerouslySetInnerHTML={{__html:str2}}></div>
2.条件渲染
var islog = true
{islog?<h3>来了老弟儿</h3>:<h3>出去吧</h3>}
3.列表渲染
var list = ["react","js","angular","jQuery"]
{
list.map(item=>(<p key={item}>{item}</p>))
}
四、事件
- 和原生js事件一致,事件用驼峰式
- onclick~onClick onmouse~onMouse
- 事件总是要响应一个函数
事件响应
<h1 onClick={()=>{alert("abc)}}></h1>
doit = ()=>{"你好"}
<h1 onClick={this.doit}></h1>
事件传参
<p onClick={this.doit.bind(this,"河南")}>-传参</p>
<p onClick={()=>this.doit("是中国不可分割得一部分")}>统一-传参</p>
五、state
- react组件得状态/数据
- this.setState({k:新的值})
- 当state发生变化,引用state得视图会自动更新
表单的数据绑定
<input type='text' value={this.state.msg} onChange={this.updateMsg} />
updateMsg = e=>this.setState({msg:e.target.value})
六、组件
- 定义组件(代码展示如下)
src/components/Steper.js
- 导入组件
import Steper from './components/Steper'
stepr小实例
import React, { Component } from 'react'
class Steper extends Component {
constructor(props) {
super(props);
this.state={
count:props.num
}
}
updateCount =(e)=>{
if(e.target.value*1>=1 && e.target.value*1<=9){
this.setState({count:e.target.value})
this.props.updateSize(e.target.value)
}else{
return
}
}
min=()=>{
if(this.state.count*1-1>=1){
this.setState({count:this.state.count*1-1})
this.props.updateSize(this.state.count*1-1)
}
return
}
add=()=>{
if(this.state.count*1+1<=9){
this.setState({count:this.state.count*1+1})
this.props.updateSize(this.state.count*1+1);
}
return ;
}
render() {
return ( <span>
<button onClick={this.min}>-</button>
<input
type="text"
onChange={this.updateCount}
value={this.state.count}
/>
<button onClick={this.add}>+</button>
</span> );
}
}
Steper.defaultProps = {
num:1
}
export default Steper;
import React, { Component } from 'react'
import Steper from './components/Steper'
class App extends Component {
state = {
msg:'',
size:100
}
updateSize = n=>this.setState({size:n})
render() {
return ( <div>
{}
<Steper num={this.state.size} updateSize={this.updateSize}></Steper><br/>
<Steper num={10}></Steper><br/>
<Steper></Steper>
<div style={{border:"1px solid red",width:this.state.size+"px",height:this.state.size+"px"}}>
{this.state.size}
</div>
</div> );
}
}
export default App;
七、参数传参
父传子
<Steper num={5}></Steper>
props.num
默认参
Steper.defaultProps = {
num:1
}
子传父,执行父组件得传递过来得props回调函数,子传父:执行回调函数
updateSize = n=>this.setState({size:n})
<Steper num={this.state.size} updateSize={this.updateSize}></Steper>
props.updateSize()
传参小图解
![传参小图](https://i-blog.csdnimg.cn/blog_migrate/b6ad313aefb57485c2d0dbdb1f42354c.png)
八、组件的设计
1.容器组件
- 一个页面,一个容器组件
- 有state,处理state方法
- 类组件
2.视图组件
- 显示内容,一个视图组件
- 只有props没有state
- 函数组件
九、DOM引用
- 创建dom引用的方法
import createRef from 'react'
- 创建dom引用
var inp = createRef()
- 引用
<p ref={}></p>ref
- 获取值
inp.current.value'