React学习记录

mac2024-08-22  68

1. Fragment:这是一个占位符, 防止在页面渲染的时候有多余的div标签 2. 获取点击标签的类型:e.target.tagName.toLowerCase() 3. 希望显示的内容不进行转义:dangerouslySetInnerHTML={{__html: item}} 4. 父组件向子组件之间传值:父组件以属性的形式传递,子组件使用this.props.xxx接收 子组件向父组件传值:父组件将有关函数传递过去,子组件通过调用父组件的有关处理函数(传递参数)进行对父组件值的修改 父组件传递给子组件的值,子组件不能修改父组件传递的值(**单项数据流**),方便调试定位 5. 虚拟DOM:操作DOM的非常消耗性能 render里面的JSX会先编程一个JS对象(虚拟DOM),然后再变成一个真实的DOM 其实就是转换成虚拟DOM,该接口更加偏向于底层 React.createElement(tag,tag上的属性,tag里面的内容) > 优点:1. 提升了性能 2. 它使得跨端应用得以实现。React Native 6. diff算法 setState方法进行变化的时候就会进行页面的更新,setState是异步的 7. 使用ref相当于直接去操作DOM节点,性能比较低;使用ref,相关的tag将会被挂载到this上面 8. setState是一个异步函数,但是可以接受第二个参数,是一个callback,保证setState挂载之后再执行这个回调函数 9. React中的生命周期函数 constructor函数:用于初始化,但是不是react的生命周期函数 > 初始化:创建state和props > 页面挂载: componentWillMount:组件即将被挂载到页面的时候自动执行 render函数:state和props会被自动的调用执行 componentDidMount:组件被挂载之后自动执行 > 更新页面: props/states: componentWillReceiveProps:(state没有这个函数的执行) 1. 组件从父组件接收了参数 ,只要父组件的render函数重新被执行了,子组件的这个生命周期函数就会被执行 2. 组件第一次存在于父组件中,不会执行; 3. 组件已经存在于父组件之后,才会执行 shouldComponentUpdate:组件被更新之前,自动执行 有一个boolean的返回结果:可以对更新的内容进行接获然后动态更新 如果返回false,组件将不会更新 如果返回true,组件将会更新 componentWillUpdate:被更新之前自动执行,在shouldComponentUpdate之后执行,根据之前的状态判断时候执行 render:重新渲染页面 compoentDidUpdate:组件更新渲染完成之后会被执行 > 组件从页面中去除 componentWillUnmount:组件即将被从页面中剔除将会被执行
最新回复(0)