1.函数组件:函数组件和class组件的区别是:函数组件没有生命周期,没有实例,没有state,纯函数,输入props,输出JSX,不能扩展其他方法
// 函数组件写法
function Writer(props) {
const {textData} = props
return (
<WriterWrapper>{textData}</WriterWrapper>
)
}
// class组件写法
class Writer extends PureComponent {
render() {
const {textData} = this.props
return (
<WriterWrapper>{textData}</WriterWrapper>
)
}
}
export default Writer;
2.受控组件:受控组件的意思就是元素的值和state里定义的属性是相关联的。只要state改变,页面就会重新渲染。React是没有v-model的,只能自己手动实现。
非受控组件:就是和受控组件意思相反,元素上的值不受state的控制。想要获取元素的值,只能手动操作元素去获取元素的值。利用ref去获取元素,元素需要设置默认值defaultValue或者defaultChecked,例如上传文件的标签
3.Portals:中文意思传送门,主要应用于偏UI的组件,例如:某个组件里有个元素是固定定位。那么这个元素的位置应该在body节点下面,但是这个元素层级比较深,这时候用Portals把这个元素提取到body节点下面。ReactDOM.createPortal(元素, body节点)
还有当父元素有overflow:hidden样式时也可以利用此方法。
还有当父元素的z-index值比较小的时候,也可以利用此方法。
// 引入ReactDOM
import ReactDOM from 'react-dom'
// ReactDOM.createPortal(组件,dom)
function Writer(props) {
const {textData} = props
return (
ReactDOM.createPortal(
<Consumer>
{(data) =>
<WriterWrapper>{textData} {data}</WriterWrapper>
}
</Consumer>,
document.body
)
)
}
4.context上下文:当有某些公共信息需要传递给每个组件时使用。
// 创建一个context对象 Provider是提供者,Consumer是消费者
export const {Provider,Consumer} = React.createContext("默认名称");
// 用Provider标签将要共享这个数据的组件包裹起来,在value这个字段将要传递的数据传递出去,这个数据可以是任何类型对象、数组、字符串
class Home extends PureComponent {
constructor() {
super()
this.state = {
commonData: 'light'
}
}
render() {
return (
<Provider value={this.state.commonData}>
<HomeWrapper>
<HomeLeft>
<img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
<Topic />
<List />
</HomeLeft>
<HomeRight>
<Recommend />
<Writer textData={this.state.text} />
{/* <Uncontrol /> */}
</HomeRight>
{ this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>顶部</BackTop> : null}
</HomeWrapper>
</Provider>
)
}
}
// 消费者
// 引入父组件的Consumer容器
import { Consumer } from "../index";
// 用Consumer标签将组件内容包裹起来,组件里的内容要在回调函数里
function Writer(props) {
const {textData} = props
return (
<Consumer>
{(data) =>
// 这里data就是提供者传过来的数据light
<WriterWrapper>{textData} {data}</WriterWrapper>
}
</Consumer>
)
}
export default Writer;
5.异步组件
import()
React.lazy
React.Suspense
const Writer = React.lazy(() => import('./components/Writer'))
<React.Suspense falback={<div>加载中...</div>}>
<Writer textData={this.state.text} />
</React.Suspense>
6.高阶组件HOC、Render Props,组件公共逻辑抽离
HOC接收一个组件,返回一个组件,HOC高阶组件里放公共逻辑,将接收进来的组件包裹起来并返回,数据按正常传值去传。 {…this.props} 加这个可以透传从HOC的父组件传进来的props数据。Vue透传所有属性$props v-bind。
React-redux里的connect就是高阶组件:
Const VisibletodoList = connect(mapStateToProps, mapDispatchToProps)(TodoList)
Render Props也是先定义一个公共组件,子组件里引入公共组件,传一个render函数给公共组件,在公共函数里将state作为props传递给render函数,执行render函数并返回。