组件
对具有一定独立功能的数据与方法的封装,对外暴露接口,有利于代码功能的复用,且不用担心冲突问题。
函数式组件
- 函数的名称就是组件的名称
- 函数的返回值就是组件要渲染的内容
类式组件
- 组件类必须继承 React.Component
- 组件类必须有 render 方法
// 类式组件写法的必要条件
import React, {Component} from 'react';
import FriendList from './FriendList';
// 1.组件类必须继承 React.Component
class App extends Component{
// 2.组件类必须有 render 方法
render(){
// 3.render方法的return后定义组件的内容
return (<div><FriendList /></div>)
}
}
export default App;
props传参
父组件
class FriendList extends Component{
render(){
return (
<div className="friend-list">
{/* 插值 可以写表达式,函数调用,也可以写函数的定义 */}
{
// 返回一个数组 Object.keys
// map 为数组方法 循环数组中的属性名
// 列表循环创建分组
Object.keys(data).map((item,index)=>{
return (
// 传参
<DL
key = {index}
name = {item} //传递属性名
value = {data[item]} //传递属性值
/>
)
})
}
</div>
)
}
}
export default FriendList;
子组件接收参数
class DL extends Component{
render(){
// 接收父组件的参数
console.log(this.props);
let {title,list} = this.props.value;
return (
<div className="friend-group">
<dt>{title}</dt>
{
list.map((item,index)=>{
return <dd key={index}>{item.name}</dd>
})
}
</div>
)
}
}
export default DL
state
- state 组件自身状态
- setState
- 多个 setState 合并
注意: React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
点击事件
- 问题:在render外面定义函数,this指向是undefend
class App extends Component{
// 自身数据,相当于data
state = {
nub:20,
name:"路飞",
sex:"男"
}
fn(){
console.log(this)
}
render(){
console.log(this.state);
let {nub} = this.state;
return (<div>
<p>姓名:{this.state.name}</p>
<p>性别:{this.state.sex}</p>
<p>年龄:{this.state.nub}</p>
<button onClick={this.fn}>长一岁</button>
</div>)
}
}
export default App;
- 解决方法:1.箭头函数
<button onClick={
()=>{
console.log(this)
}
}>长一岁</button>
- 2.把箭头函数定义在render外面,在事件上调用
fn = ()=>{
console.log(this);
// React 里,只需更新组件的 state,
// 然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
this.setState({
nub:this.state.nub+1
})
}
props 与 state 的区别
state 的主要作用是用于组件保存、控制、修改自己的可变状态,在组件内部进行初始化,也可以在组件内部进行修改,但是组件外部不能修改组件的 state
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件,它是外部传进来的配置参数,组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。通常,props 做为不变数据或者初始化数据传递给组件,可变状态使用 state