声明式,高效,灵活的构建用户界面的js库

1.props,ref,context

2.ref的使用

const ref=React.createRef();

子组件的ref属性设置为ref变量

3.子组件定义ref给谁使用

const ChildRefChange=React.forwardRef(Child);

子组件内部第二个参数为ref,拿到之后赋值给内部标签的ref属性

4.props传递方法修改父组件数据,写法为(调用方法名.bind(this)(性能更优)/方法写为箭头函数)

这里的bind可以统一在constructor中改变this

5.context使用

1)声明:const textContext=React.createContext();

2)提供变量:提供者textContext.Provider组件,带有属性value

3)获取变量:消费者textContext.Consumer

4)class子组件获取变量

-先声明contextType=textContext;

-通过this.context获取到context内容

1.获取最新值

react-dom插件的flushSync包裹setState设置值(强制更新变量),后面可以获取最新值

注意:flushSync无法直接在生命周期使用,需要包裹进函数内

2.setState设置函数获取上一次的值

this.setState((state,props)=>

return {counter:state.counter+props.ins}

)

3.setState进行batch批处理,变量赋值未改变只执行一次

input,value受控组件

文件上传非受控组件

1)store=>redux,mobx,dva

2)context

3)变量提升到公共祖先组件中

4)eventbus

App组件中设置监听

document.addEventListner('LOGIN',()=>{

//

})

其他组件调动

document.dispatchEvent(new CustomEvent('LOGIN'))

5)pubsub-js

合成事件设置了阻止冒泡e.stopPropagation,拦截不了,因为合成事件本身就是委托到根节点的,等它执行的时候已经冒泡完了

'react-dom'的createPortal('内容',传送的地方比如document.body)

1.shouldCompontentUpdate(nextProps,nextState)设置为return false(不更新)

无法阻止context的更新

2.getSnapshotBeforeUpdate(prevProps,prevState)

(获取快照)返回的值会变成componentDidUpdate(prevProps,prevState,snapshot)的第三个参数

3.getDerivedStateFromProps(nextProps,prevState)

作用:替代componentWillReceiveProps componentWillUpdate,返回的是state的值,null代表不更新

4.componentDidCatch(error,info)获取到组件渲染错误

5.getDerivedStateFromError(error)根据错误返回不同的state属性值从而更改页面显示效果

1)shouldComponentUpdate(prevProps,prevState,nextProps,nextState)//返回false不更新

2)pureComponent//默认是浅对比

3)Reacmo+函数组件//通过Object.is对比两个对象浅对比

1.mvc:controller控制器=>model数据=>view视图=>触发控制器的事件

2.mvvm:model数据 view视图 view model

用户viewview modelmodel

3.react不是mvvm框架,vue是类似mvvm

1.jsx作为属性的时候能够防止xss攻击的(跨站点脚本攻击),react源码对变量属性内容的特殊字符进行了转义

2.jsx通过babel解析

1)使用React.createElement创建元素然后

生成对象{

$$typeof:Symbol('react.element'),//防伪标识

type:'h1',

props:{

children:'内容',

className:'greeting'

},

...

}

2)使用ReactDOM.render转换为dom

diff比较虚拟dom的变动,变动的内容更新到真实的view视图

1.组件本质上就是js函数,组件首字母大写

2.class组件的constructor的禁忌

1)不要调用setState

2)避免将props的值复制给state