React组件

组件复用 - 数据抽取

为了提高组件的复用性,通常会把组件中的一些可变数据提取出来

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};

props 和 state

  • props 父组件传递过来的参数
  • state 组件自身状态
    • setState
    • 多个 setState 合并

props 与 state 的区别

state 的主要作用是用于组件保存、控制、修改 自己 的可变状态,在组件内部进行初始化,也可以在组件内部进行修改,但是组件外部不能修改组件的 state
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件,它是外部传进来的配置参数,组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。通常,props 做为不变数据或者初始化数据传递给组件,可变状态使用 state

组件通信与数据流

在 React.js 中,数据是从上自下流动(传递)的,也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件,但是子组件不能修改 props - React.js 是单向数据流,如果子组件需要修改父组件状态(数据),是通过回调函数方式来完成的。

  • 父级向子级通信
  • 子级向父级通信
已标记关键词 清除标记
相关推荐
<p> <strong>课程概述:</strong><br /> <br /> <span style="font-size:14px;background-color:#F7F9FC;">React是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /> <br /> <span style="font-size:14px;background-color:#F7F9FC;color:#0000FF;"><strong>学习技巧:</strong>学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /> <br /> <span style="font-size:14px;background-color:#F7F9FC;color:#0000FF;">此react课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span><br /> <br /> <span style="background-color:#F7F9FC;color:#FF8C00;font-size:18px;">免费提供《完整实战项目接口文档》,绝对可用!</span> </p> <p> <img src="https://img-bss.csdn.net/201911141034032944.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/201911141041249692.jpg" alt="" /> </p> <p> <img src="https://img-bss.csdn.net/201911150927136714.jpg" alt="" /> </p>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页