组件
对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。
函数式组件
函数的名称就是组件的名称函数的返回值就是组件要渲染的内容
类式组件
组件类必须继承 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
