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:组件即将被从页面中剔除将会被执行