完善资料让更多小伙伴认识你，还能领取20积分哦， 立即完善>
3天内不再提示
|
|
|
相关推荐
2个回答
|
|
|
2、什么是JSX
JavaScript与XML的结合，方便用html代码创建虚拟DOM，虚拟DOM不是真实的DOM节点，而是虚拟化的，他可以快速反应，不占用页面的渲染机制，而且快速反应我们的动作。 在JSX中
// import React, {Component} from 'react'import React, {Component, Fragment} from 'react'class Xiaojiejie extends Component { render() { return ( //
React以数据为驱动，不进行（官方也不建议）DOM操作，只需要关心数据就好了。 增加数据怎么增加？ 在构造函数中实现。 return{ // ........................ {/* 下面用this.state.inputValue = e.target.value会报错，需要进行绑定 */} // ........................ )} inputChange(e) { // 但是通过这种方式，在页面上看不到数据有任何的变化 console.log(this) // 下面会报错，this的指向是错误的，需要使用bind方法进行绑定才可以 // this.state.inputValue = e.target.value // 同时数据的改变也不能用上面这种方式 this.setState({ inputValue: e.target.value }) }4、父组件向子组件传值 就相当于增加服务这个功能，就是父组件向子组件传递参数。 首先创建一个js文件，命名为XiaojiejieItem，这是Xiaojiejie的子组件 import React, {Component} from "react";import "./style.css";// import Xiaojiejie from "./Xiaojiejie";class XiaojiejieItem extends Component { // state = {} render() { return (
5、子组件向父组件传值 react中，不允许子组件向父组件直接传值。 可以通过下面这种绑定的形式来传值。 render() { return ( constructor(props) { super(props); this.handleClick = this.handleClick.bind(this) }1） 子组件不能直接改变父组件的值 删除。就是我们的demo中，通过点击数据，删除父组件中的数据。直接删除是不允许的。 |
|
|
|
|
|
6、三大重点
1） 单向数据流 父组件向子组件传递数据是单向的，只能传递给子组件，子组件不能修改数据。如果想要修改数据，需要在父组件中定义相关的方法，然后将该方法也传递给子组件，由子组件来调用。 1、为什么需要单向数据流 因为父组件可能有很多个子组件，如果子组件能随意修改父组件的数据，其他组件所拿到的数据也会一同被修改，会对其他组件产生影响。 2） react与其他框架相结合 可以结合jQuery来使用 服务满意 3） 函数式编程优点
1）chrome扩展程序——react developer tools
下面可以看到父组件向子组件传递参数时的情况，我们能够传递参数，但是没有对参数做任何校验和判断。后期极有可能出现业务逻辑错误，并且不容易找到。
import PropTypes from 'prop-types'数据校验时，需要把校验的程序写在类的外面 class XiaojiejieItem extends Component { ...}XiaojiejieItem.protoTypes = { content: PropTypes.string, index: PropTypes.number, deleteItem: PropTypes.function}9、ref绑定 Ref是一个获取DOM节点或 React元素实例的工具。在 React中 Ref提供了一种方式，允许用户访问DOM节点或者在render方法中创建的React元素。 在React单项数据流中，props是父子组件交互的唯一方式。要修改一个子组件，需要通过的新的props来重新渲染。 但是在某些情况下，需要在数据流之外强制修改子组件。被修改的子组件可能是一个React组件实例，也可能是一个DOM元素。对于这两种情况，React 都通过 Refs的使用提供了具体的解决方案。
addList() { ...... /* 发现下面打印的长度总是少一个 */ console.log(this.ul.querySelectorAll('li').length) /* * * setState是一个异步的方法，不是同步的方法，虚拟DOM渲染也是需要时间的， * 因为console是实时刷新的，还未等setState执行完毕（还未渲染完成）就将结果输出， * 因此打印的是上一次渲染后的结果。 * * */ }react通过回调函数的形式，帮我们解决了上面这种情况 addList() { this.setState({ ...... }, /* 通过回调函数的形式，就可以将结果进行同步 */ () => { console.log(this.ul.querySelectorAll('li').length) })10、react生命周期函数 参考链接：[详解react v16.0前的生命周期][https://www.jianshu.com/p/514fe21b9914] 1）什么是生命周期函数？ 在某一时刻，可以自动执行的函数。 2）四个阶段 1、初始化：Initialization constructor class Xiaojiejie extends Component { constructor(props) { super(props); this.state = { //数据驱动，那就在这里填入数据 inputValue: "Ryan", list: ["基础按摩", "精油推背", "全身按摩"] // 数据初始化完毕 } }constructor看起来完全是符合生命周期的，但是，它并不是react独有的，而是ES6的一种语法，所以严格意义上来讲，constructor不属于生命周期，而是属于ES6语法。 我们可以把constructor当做初始化语法， render render() { return () }2、挂载：Mounting render属于渲染，完全是自动执行的，完全就是一个生命周期函数。 componentWillMount 属于DOM挂载之前执行的 render state或props的状态或属性发生改变，才进行一个渲染。 componentDidMount DOM挂载完毕后执行函数。 componentWillMount ——>> render ——>> componentDidMount shouldComponentUpdate 在组件更新之前会自动执行。 shouldComponentUpdate(nextProps, nextState, nextContext) { console.log("1、shouldComponentUpdate") return true }当我们在输入框开始输入的时候，可以看到console就会有输出。 shouldComponentUpdate函数需要返回一个布尔类型的值
UNSAFE_componentWillUpdate：在shouldComponentUpdate之后执行，如果shouldComponentUpdate返回false，那么UNSAFE_componentWillUpdate也不会执行。 同样，这个函数也是在render之前执行。 componentDidUpdate 在render渲染成功后执行。 UNSAFE_componentWillReceiveProps 这是props独有的，states中没有这个函数。 该组件不能放在顶层组件中（Xiaojiejie.js），放在其中，不会执行。因为在子组件中，我们已经接收了props这个属性，所以我们可以去子组件中去操作。 该组件必须满足两个条件：
在去除或删除的时候使用 componentWillUnmount 当组件被删除时自动执行。 11、性能优化 我们之前编写的这个demo，存在一定的性能问题。 在我们的子组件中，添加这样一句代码，然后到浏览器控制台中查看。 render() { console.log("child---->>render") ......} 1）如何优化？ 在子组件中添加在前面生命周期函数讲解中所用到的一个函数： shouldComponentUpdate(nextProps, nextState, nextContext) { return false}使用该函数并返回一个false，但是直接这样写也是有问题的，如果是修改的话，就会出错。在该函数中提供了几个参数来为我们解决这个问题。
shouldComponentUpdate(nextProps, nextState, nextContext) { return nextProps.content !== this.props.content;} |
|
|
|
|
你正在撰写答案
如果你是对答案或其他答案精选点评或询问，请使用“评论”功能。
“0元购”智元灵犀X1机器人，软硬件全套图纸和代码全公开！资料免费下载！
3959 浏览 2 评论
1405 浏览 0 评论
【实操文档】在智能硬件的大模型语音交互流程中接入RAG知识库
6782 浏览 1 评论
防止AI大模型被黑客病毒入侵控制（原创）聆思大模型AI开发套件评测4
1099 浏览 0 评论
不可错过！人工神经网络算法、PID算法、Python人工智能学习等资料包分享（附源代码）
3415 浏览 0 评论
/7 
关注我们的微信
下载发烧友APP
电子发烧友观察
版权所有 © 湖南华秋数字科技有限公司
电子发烧友 （电路图） 湘公网安备 43011202000918 号 电信与信息服务业务经营许可证：合字B2-20210191
工商网监
湘ICP备2023018690号
1420
评论
淘帖
1031
