react面试题（1）

React面试题（1）

react面试题 记录一下，大佬请移步。有问题请留言。

react中的key的作用

key是react渲染页面时react diff 用于追踪那些列表中元素被修改、被删除、被添加的辅助标识，
减少不必要的元素被重渲染

this.setState的第二个参数传入函数起到了什么作用？

this.setState((state,props)=>{
	//state-- 之前的state
	//props 当前的props 或者其他的参数
	//更新state时 是合并更新的
	//在事件处理中 setState是异步的，避免了同一个setState不会被渲染两次，
	//等待浏览器事件执行完再统一渲染
},()=>{
	//在组件开始重新渲染时调用，可以用来判断组件是否渲染完成
})

react中refs的作用？

react 中的ref 类似于 vue 中的 $ref 都可以用来获取组件的DOM元素
在react calss组件中 使用 React.createRef() 创建一个能够通过 ref 属性附加到 React 元素的 ref
通过 <div ref={ref}>子组件</div> 绑定
ref.current 指向 'div' 组件，可调用div中的属性和方法
react Hook 
const ref=useRef() 是函数组件中创建ref的方法==React.createRef(),同样用current调用子组件的属性和方法
ref转发:
class box extends React.component{
	constructor(props){
		super(props);
		this.state={
		value:'按钮'
		};
		
		this.ButtonRef=React.createRef();
	}
	componentDidMount(){
		console.log( this.inputRef.current.focus(););//可以获取input的DOM元素
	}
	render(){
		return {
			<ForwardRef ref={this.ButtonRef} text={this.state.value}><ForwardRef/>
		}
	}
	
}
const forwardRef=React.forwardRef((props,ref)=>{
//第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref；
	handleButton(){
		console.log('点击了')
	}
	return (
		{
			<input type='text' ref={ref}/>
			<button>{props.value}</button>
		}
	)
})


//回调Refs + 转发ref
function CustomTextInput(props) {
  return (
    <div>
    //将ref传递到input
      <input ref={props.inputRef} type='text'/>
    </div>
  );
}

class Parent extends React.Component {
	constructor(props){
		super(props);
		this.inputElemet=null;
	}
	componentDidMount(){
	this.inputElemet.focus()
	}
  render() {
    return (
    //使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}