React
是facebook推出的一款前端开发框架,只要针对view层进行操作的
在React中所有的组件都可以看成是function
React 组件使用一个名为 render()
的方法,接收输入的数据并返回需要展示的内容。
在react中有些重要的概念:state,class。
一、class定义组件
组件需要继承在React.Component
组件内部有一个render方法,里面返回的数据会显示在页面上
1.创建项目时需要注意的实现
(1)创建script标签
(2)在页面渲染组件 在script标签底部写,表示所有的html标签都将写在id为app的标签中
并创建App类(组件)
作为父组件, 可以在该组件中添加子组件
组件必须要有
render(){
return()
}
在组件中,如果要绑定数据 使用一对{},相当于解构赋值
class创建的组件基本结构:
class C extends React.Component{
constructor(props){
super(props)
this.state={
counter: 1,
counter2:1
}
//渲染函数 用来在页面上展示数据
render(){
return (<div>
<h5>我是组件C-step={this.props.step}< <button onClick={this.clickHandle.bind(this)}>当前的counter:{ this.state.counter}</button>/h5>
<h5>当前的counter2:{ this.state.counter2}</h5>
</div>)
}
}
react中如果改变state需要调用setState方法
setState是异步的,接收第二个参数 是一个function表示set执行完毕 是回调函数
class C extends React.Component{
constructor(props){
super(props)
this.state={ counter: 1, counter2:1 }
}
clickHandle(){
console.log(this)
// this.state.counter+=1
// react中如果改变state需要调用setState方法
// setState是异步的,接收第二个参数 是一个function表示set执行完毕 是回调函数
this.setState({
counter:this.state.counter + 1
},function(){ //回调函数
console.log('setState执行完毕')
console.log(this.state.counter)
})
console.log(this.state.counter) // 1
this.setState({
counter2:this.state.counter + 2
})
console.log(this.state.counter2) // 1
}
//渲染函数 用来在页面上展示数据
render(){
return (<div>
<h5>我是组件C-step={this.props.step}</h5>
<button onClick={this.clickHandle.bind(this)}>当前的counter:{ this.state.counter}</button>
<h5>当前的counter2:{ this.state.counter2}</h5>
</div>)
}
}
二、function定义组件
通过function定义一个组件,需要有一个返回值作为组件的返回数据
返回值为一个html节点,用来在页面上展示
基本格式如下:
function H(props) {
const { label } = props // 解构赋值
// 在返回数据的时候进行展示
// 如果要绑定数据 使用一对{}
return (<div>
<h1>我是一个标题</h1>
<p>{ label }</p>
<C step={ 2 }/>
</div>)
}
三、function定义的组件与class定义组件的区别
function定义的组件与class定义的组件的区别
1.function定义的组件代码比较少
在16.8之前,function没有state属性,不可以生成局部状态的
2. 16.8之后新增hocks,可以直接使用state
class定义的组件,可以产生一个局部的状态,并且有生命周期
function定义的组件是没有这些的,但是在16.8之后的react中新增了许多hocks函数,可以使用state
useState 可以为function定义的组件设置一个state数据(16.8之后新增的方法)
返回两个值
参数一 状态state的属性名
参数二 修改数据的函数
function设置局部变量以及改变变量的值
简单功能:点击按钮修改counter的值
// 1、引入 useState
const { useState} = React
function Counter2(){
// 2、自定义的state数据(局部变量),以及改变该数据的方法
const [count,setCount] = useState(0)
const [name, ModName] = useState('tom')
return(<div>
<button onClick={()=>{setCount(count+1)}}>计数值:{count}</button>
<button onClick={()=>{ModName(name+count)}}>{name}</button>
</div>)
}
function设置局部变量的方法类似于下面的一段原生js代码
function useAbc(p){
p.num += 1
function changeP(d){
return p.num += d
}
return [p,changeP]
}
//引用类型,可以改变count的值
const [count,changCount] = useAbc({num:3})
四、父子组件之间传值
通过使用构造函数的形式进行传值
1、父组件向子组件传值
父组件通过props传递(在子组件标签里写属性来进行传递)数据到子组件,在子组件中使用this.props进行调用
在父组件中操作:
在父组件调用子组件时,将参数以属性的方法传递
render(){
return(<div>
<h5>最外层组件</h5>
<h3>子组件中数据的长度为{this.state.listCount}</h3>
<Products step={2} p={{name:'Products',id:'1111',code:'222'}}/>
</div>)
}
在子组件中通过this.props可以获取父组件传递的参数
2、子组件向父组件传值
子组件向父组件传值使用方法调用
父组件中
在调用组件的时候通过属性把一个function传递到子组件内部
子组件通过调用父组件传递的function可以操纵父组件中的代码 改变数据
在父组件中,将方法以参数的形式传递到子组件中
在子组件中进行调用