React心得之降龙十八掌:第二式-飞龙在天( React组件化开发及相关概念)

引言

(乾卦九五)《彖》曰:“‘飞龙在天’,大人造也。”

  • 学习了上一章,想必我们对于React有了一个初步的认识,了解了什么是React、什么是JSX、模块与组件、组件与组件化。那么接下来我们就学习一些React组件化开发相关知识
  • 上一章节是基础了解,那么这一章节就是重点认识了,学好了这一章节,我们就如飞龙在天,如鱼得水,在以后的实战项目中可以做的很顺手了。

1-什么是组件化开发

  • 创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。
  • 举个例子说,你要写头部Header样式功能,这样子你就可以单独写一个Header组件,把
    关于头部的结构、样式、功能都写进去,哪里需要这个头部的组件,你直接< Header/>引入即可,做到哪里需要点哪里,复用性极高。
  • 组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。

2-基本理解和使用

  1. 自定义的标签: 组件类(函数)/标签
  2. 创建组件类
    	//方式1: 无状态函数(简单组件, 推荐使用)
    	function MyComponent1(props) {
    		return <h1>自定义组件标题11111</h1>
    	}
    	//方式2: ES6类语法(复杂组件, 推荐使用)
    	class MyComponent3 extends React.Component {
    		render () {
    		  return <h1>自定义组件标题33333</h1>
    		}
    	}
    
    如图
    在这里插入图片描述
  3. 渲染组件标签
    ReactDOM.render(<MyComp />, cotainerEle)
  4. ReactDOM.render()渲染组件标签的基本流程
    React内部会创建组件实例对象/调用组件函数, 得到虚拟DOM对象
    将虚拟DOM并解析为真实DOM
    插入到指定的页面元素内部

3-组件的3大属性之state

  1. 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
  2. 初始化指定:
    constructor() {
          super()
          this.state = {
            stateName1 : stateValue1,
            stateName2 : stateValue2
          }
        }
    
  3. 读取显示:
    this.state.stateName1
  4. 更新状态–>更新界面 :
    this.setState({stateName1 : newValue})

4-组件的3大属性之props

  • 所有组件标签的属性的集合对象
  • 给标签指定属性, 保存外部数据(可能是一个function)
  • 在组件内部读取属性: this.props.propertyName
  • 作用: 从目标组件外部向组件内部传递数据
  • 对props中的属性值进行类型限制和必要性限制
    Person.propTypes = {
    		name: React.PropTypes.string.isRequired,
    		age: React.PropTypes.number.isRequired
    	}
    
  • 扩展属性: 将对象的所有属性通过props传递
    <Person {...person}/>

5-组件的3大属性之refs

  • 组件内包含ref属性的标签元素的集合对象
  • 给操作目标标签指定ref属性, 打一个标识
  • 在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象)
  • 作用: 找到组件内部的真实dom元素对象, 进而操作它

6-组件中的事件处理

  1. 给标签添加属性: onXxx={this.eventHandler}
  2. 在组件中添加事件处理方法
    eventHandler = () => {
                    
        }
    
  3. 使自定义方法中的this为组件对象
    在constructor()中bind(this)
    使用箭头函数定义方法
  4. 事件监听
    绑定事件监听:事件名 | 回调函数
    触发事件:用户对对应的界面做对应的操作 | 编码

☞组件得三大属性及事件处理案例

☛代码

头部引入
    <title>Demo</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    </style>
</head>

头部引入文件可以直接去bootcdn中文网.搜索在线引入

body中直接复制
body>
    <div id="root"></div>
    <script type="text/babel">
        //通过ES6来编写一个小案例
        class Like extends React.Component {
            // 初始化状态数据
            state = {
                islike: true,
            };
            // 点击事件
            clickHandle = () => {
                const islike = !this.state.islike;
                // 更新状态数据
                this.setState({
                    islike,
                });
                console.log(this.state);
            };
            // 返回一个自定义得虚拟DOM
            render() {
                const likeMe = '我喜欢你';
                const likeYou = ' 你喜欢我';
                return (
                    <h1 onClick={this.clickHandle}>{this.state.islike ? likeMe : likeYou} </h1>
                );
            }
        }
        //开始渲染组件----渲染插入到div标签中
        ReactDOM.render(<Like />, document.getElementById('root'));
    </script>
</body>

☛浏览器效果图

在这里插入图片描述

7-组件的组合使用

  1. 拆分组件: 拆分界面,抽取组件
  2. 实现静态组件: 使用组件实现静态页面效果
  3. 实现动态组件
    ① 动态显示初始化数据
    ② 交互功能(从绑定事件监听开始)

8-组件收集表单数据

  • 受控组件: 输入过程中自动收集数据
  • 非受控组件: 提交时手动读取数据

9-组件的生命周期(后续详解)

  1. 组件的三个生命周期状态:
    • Mount:插入真实 DOM
    • Update:被重新渲染
    • Unmount:被移出真实 DOM
  2. 生命周期流程:
    • 第一次初始化显示: ReactDOM.render(, containDom)
      constructor()
      componentWillMount() : 将要插入回调
      render() : 用于插入虚拟DOM回调
      componentDidMount() : 已经插入回调
    • 每次更新state: this.setState({})
      componentWillReceiveProps(): 接收父组件新的属性
      componentWillUpdate() : 将要更新回调
      render() : 更新(重新渲染)
      componentDidUpdate() : 已经更新回调
    • 删除组件: ReactDOM.unmountComponentAtNode(div): 移除组件
      componentWillUnmount() : 组件将要被移除回调
  3. 常用的方法
    render(): 必须写, 返回一个自定义的虚拟DOM
    constructor(): 初始化状态(state={}), 绑定this(可以箭头函数代替)
    componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听
    在这里插入图片描述

10-虚拟DOM与DOM diff算法

  1. 虚拟DOM是什么?
    一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)
    虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应
    如果只是更新虚拟DOM, 页面是不会重绘的
  2. Virtual DOM 算法的基本步骤
    用JS对象树表示DOM树的结构;然后用这个树构建一个真正的DOM树插到文档当中
    当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异
    把差异应用到真实DOM树上,视图就更新了
  3. 进一步理解
    Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。
    可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们 JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。

11-命令式编程与声明式编程

  • 声明式编程
    只关注做什么, 而不关注怎么做(流程), 类似于填空题
  • 命令式编程
    要关注做什么和怎么做(流程), 类似于问答题
  • 实例对比:
    var arr = [1, 3, 5, 7]
    // 需求: 得到一个新的数组, 数组中每个元素都比arr中对应的元素大10: [11, 13, 15, 17]
    // 命令式编程
    var arr2 = []
    for(var i =0;i<arr.length;i++) {
    	arr2.push(arr[i]+10)
    }
    console.log(arr2)
    // 声明式编程
    var arr3 = arr.map(function(item){
    	return item +10
    })
    // 声明式编程是建立命令式编程的基础上
    
    // 数组中常见声明式方法
    	map() / forEach() / find() / findIndex()
    

12-总结

这一篇主要是对于React得组件化开发的相关概念进行了一个解释,使自己在脑脑海里有一个笼统得印象,后续会针对每一个知识点进行逐一详细原理详解和运用。
愿你在这个代码繁杂、头发渐秃的编码世界里,可以温暖自己,坚持学习。

你要尽全力保护你的梦想。那些嘲笑你梦想的人,因为他们必定会失败,他们想把你变成和他们一样的人。 —《当幸福来敲门》

发布了27 篇原创文章 · 获赞 44 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/q761830908/article/details/103333050
今日推荐