看完React官方文档后,虽然有一定了解,但是一上手撸代码,还是觉得力不从心(可以说感觉完全不会)。下面总结一下深刻的几点:
1. react类名问题:
html中: <div class="dome"></div>
react中: <div className="dome"></div>
2.样式设置:
css文件 style.css
.dome{
background: #ccc;
}
react jsx模块 index.js
import { styles } from './style.css'
<script >
<div className={styles.dome}></div>
</script>
3.组件名称问题:
组件名称必须以大写字母开头
4.React组件创建方式:
a. 使用函数定义一个组件 (函数式组件)
function Welcome(props){
return <h1>Hello,{props.name}</h1>
}
b.使用ES6 class 定义组件 (类组件)
class Welcome extends React.Component {
render() {
return <h1>Hello,{this.props.name}</h1>
}
}
5.生命周期函数:
装载组件触发: componentWillMount
更新组件触发: componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate 请求Ajax
卸载组件触发: componentWillUnmount
6.React 组件生命周期:
getInitialState: 初始化 this.state 的值,只在组件装载之前调用一次.
getDefaultProps: 只在组件创建时调用一次并缓存返回的对象
7.React函数方法
React.createElement(): 创建并返回指定类型的新React元素
cloneElement(): 以element元素为样板克隆并返回新的React元素
createFactory(): 返回用于生成指定类型React元素的函数
isValidElement(): 验证对象是否为React元素,返回值为 true 或 false
Children.map()/forEach()/count()/only()/toArray()
Fragment: 组件能够在不额外创建 DOM 元素的情况下,让 render() 方法中返回多个元素。 <React.Fragment></React.Fragment />
createRef(): 创建一个能够通过 ref 属性附加到 React 元素的 ref。
forwardRaf()
lazy(): 允许你定义一个动态加载的组件。有助于缩减 bundle 的体积,并延迟加载在初次渲染时未用到的组件。
Suspense: 可以指定加载指示器,以防其组件树中的某些子组件尚未具备渲染条件 <React.Suspense></React.Suspense>
注: 以上方法不怎么会。如果各位大神有什么好的意见,可以相互交流交流