初入React笔记1

看完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>

 

注： 以上方法不怎么会。如果各位大神有什么好的意见，可以相互交流交流