作者：前世梦0708 | 来源：互联网 | 2020-09-18 14:07
难度: ⭐⭐
Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中，props 是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下咱们需要在典型数据流外，强制修改子代，这个时候可以使用 Refs。
咱们可以在组件添加一个 ref 属性来使用，该属性的值是一个回调函数，接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
Submit
)
}
} 请注意，input 元素有一个ref属性，它的值是一个函数。该函数接收输入的实际 DOM 元素，然后将其放在实例上，这样就可以在 handleSubmit 函数内部访问它。
经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。
function CustomForm ({handleSubmit}) {
let inputElement
return (
handleSubmit(inputElement.value)}>
Submit
)
} 问题 4：在 React 中如何处理事件 主题: React 为了解决跨浏览器的兼容性问题，SyntheticEvent 实例将被传递给你的事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
比较有趣的是，React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处，也意味着 React 在更新 DOM 时不需要跟踪事件监听器。
问题 5：state 和 props 区别是啥？ 主题: React props和state是普通的 JS 对象。虽然它们都包含影响渲染输出的信息，但是它们在组件方面的功能是不同的。即
state 是组件自己管理数据，控制自己的状态，可变；props 是外部传入的数据参数，不可变；没有state的叫做无状态组件，有state的叫做有状态组件； 多用 props，少用 state，也就是多写无状态组件。 问题 6：如何创建 refs 主题: React Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return
;
}
} 或者这样用：
class UserForm extends Component {
handleSubmit = () => {
console.log("Input Value is: ", this.input.value)
}
render () {
return (
Submit
)
}
} 问题 7：什么是高阶组件？ 主题: React 高阶组件(HOC) 是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件 ，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为。
const EnhancedCompOnent= higherOrderComponent(WrappedComponent); HOC 可以用于以下许多用例
代码重用、逻辑和引导抽象 渲染劫持 state 抽象和操作 props 处理 问题 8：在构造函数调用 super 并将 props 作为参数传入的作用是啥？ 主题: React 在调用 super() 方法之前，子类构造函数无法使用this引用，ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。
传递 props
class MyComponent extends React.Component {
constructor(props) {
super(props);
console.log(this.props); // { name: &＃39;sudheer&＃39;,age: 30 }
}
} 没传递 props
class MyComponent extends React.Component {
constructor(props) {
super();
console.log(this.props); // undefined
// 但是 Props 参数仍然可用
console.log(props); // Prints { name: &＃39;sudheer&＃39;,age: 30 }
}
render() {
// 构造函数外部不受影响
console.log(this.props) // { name: &＃39;sudheer&＃39;,age: 30 }
}
} 上面示例揭示了一点。props 的行为只有在构造函数中是不同的，在构造函数之外也是一样的。
问题 9：什么是控制组件？ 主题: React 在 HTML 中，表单元素如
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
