wordpress 建站后端,中国互联网站建设中心,企业建设网站的步骤,建立模板wordpress1.说说对react的理解 1️⃣是什么 React是用于构建用户界面的 JavaScript 库,遵循组件设计模式、声明式编程范式和函数式编程概念#xff0c;更高效使用虚拟 DOM 来有效地操作 DOM #xff0c;遵循从高阶组件到低阶组件的单向数据流。 react 类组件使用一个名为 render() 的方…1.说说对react的理解 1️⃣是什么 React是用于构建用户界面的 JavaScript 库,遵循组件设计模式、声明式编程范式和函数式编程概念更高效使用虚拟 DOM 来有效地操作 DOM 遵循从高阶组件到低阶组件的单向数据流。 react 类组件使用一个名为 render() 的方法或者函数组件 return 接收输入的数据并返回需要展示的内容。形式就是JSX最终会babel被编译为合法的 JS语句调用被传入的数据可在组件中通过this.props 在render() 访问。 2️⃣特性 JSX 语法 单向数据绑定 虚拟 DOM 声明式编程 Component 3️⃣优势 高效灵活 声明式的设计简单使用 组件式开发提高代码复用率单向响应的数据流会比双向绑定的更安全速度更快 2.state和props区别 1️⃣state 一个组件的显示形态可以由数据状态和外部参数所决定而数据状态就是 state ,一般在 constructor 中初始化当需要修改里面的值的状态需要通过调用 setState 来改变。 setState 还可以接受第二个参数,它是一个函数,会在 setState 调用完成并且组件开始重新演染时被调用可以用来监听渲染是否完成 2️⃣props props理解为从外部传入组件内部的数据react 具有单向数据流的特性,所以他的主要作用是从父组件向子组件中传递数据。props 可以传字符串,数字传递对象数组回调函数。 props 在内部不可变的,如果想要改变它看,只能通过外部组件传入新的 props 来重新渲染子组件否则子组件的 props 和展示形式不会改变 3️⃣区别 相同点: 两者都是 JavaScript 对象 两者都是用于保存信息 props 和state 都能触发渲染更新 区别: props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化 props 在组件内部是不可修改的,但state 在组件内部可以进行修改state 是多变的、可以修改 3.super()和super(props)区别 在React 中,类组件基于ES6,所以在 constructor 中必须使用 super在调用 super 过程无论是否传入 props,React 内部都会将 porps赋值给组件实例porps 属性中如果只调用了 super(),那么 this.props 在super() 和构造函数结束之间仍是undefined 4.说说对react中类组件和函数组件的理解 1️⃣类组件 通过使用 ES6 类的编写形式来编写组件,该类必须继承 React.Component 如果想要访问父组件传递过来的参数可通过this.props 的方式去访问,在组件中必须实现render 方法,在return 中返回 React 对象 2️⃣函数组件 通过函数编写的形式去实现一个 React 组件。 函数第一个参数为props用于接收父组件传递过来的参数 3️⃣区别 1.编写形式一个function一个class 2.状态管理 类组件中调用setState在 hooks 情况下,函数组件调用 state 则需要创建一个类组件或者 state 提升到父组件中然后通过props 对象传递到子组件 3.生命周期 在函数组件中不存在生命周期生命周期钩子来自于继承的react.Component,函数组件useEffect来对应类组件中的componentDidMount生命周期。useEffect回调函数中return一个函数则return函数会在组件卸载的时候执行正如componentWillUnmount 4.调用方式 函数组件调用则是执行函数 类组件则需要将组件进行实例化然后调用实例对象的render方法 5.获取渲染值 类组件中输出this.props.user,this总是可变的而函数组件本身不存在this 4️⃣总结 两种组件都有各自的优缺点 函数组件语法更短更简单而类组件会因大量使用this而让人感到困惑 5.说说对受控组件和非受控组件的理解应用场景 受控组件就是受我们控制的组件组件的状态全程响应外部数据受控组件需要初始状态和状态更新事件函数。 非受控组件初始化接受外部数据自己在内部存储其自身状态通过ref查询DOM并查找其当前值。 应用场景 大部分时候推荐使用受控组件来实现表单 6.说说react的事件机制 react基于浏览器的事件机制自身实现了一套事件机制包括事件注册事件合成事件冒泡事件派发等在react中这套事件机制被称为合成事件。 react事件机制总结 React 上注册的事件最终会绑定在document这个 DOM 上而不是 React 组件对应的 DOM(减少 内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件) React 自身实现了一套事件冒泡机制所以这也就是为什么我们event.stopPropagation()无效的原因。 React 通过队列的形式从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件SyntheticEvent 7.react事件绑定的方式有哪些区别 绑定方式 render方法中使用bind render方法中使用箭头函数 constructor中bind 定义阶段使用箭头函数绑定 区别 编写方面:方式一、方式二写法简单,方式三的编写过于冗杂 性能方面:方式一和方式二在每次组件render的时候都会生成新的方法实例性能问题欠缺。若该函数作为属性值传给子组件的时候都会导致额外的渲染。而方式三、方式四只会生成一个方法实例 综合上述方式四是最优的事件绑定方式。 8.react构建组件的方式有哪些区别 构建方式 函数式创建 通过React.createClass 方法创建 继承 React.Component 创建 区别 由于React.createclass创建的方式过于冗杂并不建议使用而像函数式创建和类组件创建的区别主要在于需要创建的组件是否需要为有状态组件:· 对于一些无状态的组件创建,建议使用函数式创建的方式 由于react hooks 的出现,函数式组件创建的组件通过使用 hooks 方法也能使之成为有状态组件,再加上目前推崇函数式编程,所以这里建议都使用函数式的方式来创建组件在考虑组件的选择原则上能用无状态组件则用无状态组件 9.说说react中引入css的方式有哪几种区别 方式 在组件内直接使用 组件中引入.css 文件 .module.css 文件 css in Js 区别 在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性但是大量的演示编写 在组件内直接使用容易导致代码混乱 组件中引入.css 文件符合我们日常的编写习惯,但是作用域是全局的样式之间会层叠引 引入.module.css 文件能够解决局部作用域问题但是不方便动态修改样式需要使用内联的方式进行样式的编写 通过cssin s 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义修改状态等 至于使用 react 用哪种方案引入 css ,并没有一个绝对的答案,可以根据各自情况选择合适的方案 10.说说react生命周期有哪些不同阶段每个阶段对应的方法是 三个阶段 创建阶段 constructor getDerivedStateFromProps render componentDidMount 更新阶段 getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate 卸载阶段 componentWillUnmount 11.react中组件之间如何通信 父组件向子组件传递 由于react的数据流动为单向的父组件向子组件传递是最常见的方式父组件在调用子组件的时候只需要在子组件标签哪传递参数子组件通过props属性就能接收父组件传递过来的参数 子组件向父组件传递 父组件向子组件传一个函数然后通过这函数的回调拿到子组件传过来的值 兄弟组件之间的通信 父组件作为中间层来实现数据的互通通过使用父组件传递 父组件向后代组件传递 通过使用react.createContext创建一个context创建成功后存在provider组件通过value属性用于给后代组件传递数据通过consumer组件或者使用contextType属性接收 非关系组件传递 通过使用redux 总结 由于 React 是单向数据流,主要思想是组件不会改变接收的数据,只会监听数据的变化当数据发生变化时它们会使用接收到的新值,而不是去修改已有的值因此可以看到通信过程中数据的存储位置都是存放在上级位置中 12.说说对高阶组件的理解 在react中高阶组件即接受一个或多个组件作为参数并且返回一个组件本质就是一个函数并不是一个组件。 通过对传入的原始组件做一些你想要的操作(比如操作 props,提取 state,给原始组件包裹其他元素等)从而加工出想要的组件把通用的逻辑放在高阶组件中对组件实现一致的处理从而实现代码的复用所以高阶组件的主要功能是封装并分离组件的通用逻辑,让通用逻辑在组件间更好地被复用 使用高阶组件的同时一般遵循一些约定如下: props 保持一致 不能在函数式组件上使用 ref 属性因为没有实例 不要再render()方法中使用高阶组件 使用 compose 组合高阶组件 应用场景 高阶组件能够提高代码的复用性和灵活性在实际应用中常常用于与核心业务无关但又在多个模块使用的功能,如权限控制、日志记录、数据校验、异常处理、统计上报等 13.在react中组件间过渡动画如何实现 在react 中实现过渡动画效果如 react-transition-group react-motion Animated 原生的CSS 14.说说你在react项目中如何捕获错误的 错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误形成错误边界组件的两个条件: 使用了 static getDerivedStateFromError(). 使用了 componentDidCatch() 下面这些情况无法捕获到异常: 事件处理 异步代码 服务端渲染 自身抛出来的错误 对于错误边界无法捕获的异常,如事件处理过程中发生问题并不会捕获到是因为其不会在渲染期间触发并不会导致渲染时候问题 这种情况可以使用js 的try…catch…语法 15.说说对react里的refs的理解应用场景 React 中的Refs 提供了一种方式允许我们访问DOM 节点或在 render方法中创建的React元素本质为 ReactDOM.render() 返回的组件实例,如果是渲染组件则返回的是组件实例如果渲染dom 则返回的是具体的dom 节点 使用 创建ref 的形式有三种: 传入字符串使用时通过 this.refs传入的字符串的格式获取对应的元素 传入对象对象是通过 React.createRef()方式创建出来使用时获取到创建的对象中存在current 属性就是对应的元素 传入函数该函数会在 DOM 被挂载时进行回调,回调函数参数会传入一个 元素对象,然后通过实例将对象进行保存 传入hook,hook是通过useRef() 方式创建使用时通过生成hook对象的 current 属性就是对应的元素 应用场景 对Dom元素的焦点控制、内容选择、控制 对Dom元素的内容设置及媒体播放对Dom元素的操作和对组件实例的操作 集成第三方 DOM 库
