组件

组件

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。

函数式组件

• 函数的名称就是组件的名称
• 函数的返回值就是组件要渲染的内容

类式组件

• 组件类必须继承 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