React学习笔记

React 优点：完全由js实现，组件化；虚拟DOM：达到组建高效更新的目的；diff算法：进行虚拟DOM和DOM的对比，tree diff ;component diff ,elment diff;

1、 React项目创建:

		  首先安装node.js
          npm install –g creat-react-app
          creat-react-app   项目名
          cd 项目名
          npm start

manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头，ReactDOM.render(组件名，document.getElementById(‘root’);将组件挂载到id为root的标签上

2、React Jsx语法

定义：< 组件名 />
使用该语法必须引入React

1. Fragment 占位符：（用于返回时隐藏最外层标签）
   
   类名.propTypes = { } 规定传参的类型
类名.defaultProp = { } 规定传参的默认值

2. 构造函数：
   

   	constructor(props){
   		Super(props);       //继承Component父类的构造函数
   		//定义数据
   		This.state={
   			  InputValue : ‘’,
   			  List : [],
   		}
   	}
   

3. 事件监听：
   
   OnChange 改变State数据
   

4. 点击事件：
   onClick
   
   

5. List循环:
   

    	  map（(item , index) =>{  } ）函数接收回调，内容，下标
   

6. 注释

   	 	{/*风格和发挥*/}
   		或者
   		{
   		  //士大夫发
   		}
   

7. 用 className定义css样式
   HtmlFor定义lable标签

3、组件

8. 组件之间传值
   新建js文件，在父js文件引入，
   父组件通过属性向子组件传值
   
   子组件操作父组件内容需要父组件给子组件传过去与方法：
   
9. propTypes规定父组件传的属性类型（详细见官网）
   
   
   传递的属性不能为空
   
10. defaultProps用来设置传过来的属性的默认值
    

4、虚拟DOM

1.每次state数据和props数据发生改变，render函数被重新调用
2.每次发生改变生成新的虚拟DOM，虚拟DOM与真实DOM对比，找到不同，之间改变真实DOM

5、Ref的使用作用

在react里直接获取DOM元素（不建议使用）

6、React的生命周期函数，即某一刻组件自动调用的函数，以下

1. 初始化函数
2. 第一次在页面运行

   ComponentWillMount() 在组件即将被挂载到页面的时刻执行
   Render() 函数在组件被挂载到页面时执行
   ComponentDidMount() 在组件被挂载到页面后执行

3. 更新时执行的函数

   ShoudComponentUpdate()在组件被更新之前，自动执行，要求返回bool类型的值
   ComponentWillUpdate()在组件被更新之前，ShoudComponentUpdate()函数之后执行
   Render()在组件被更新时执行
   ComponentDidUpdate()在组件被更新之后执行
   特殊ComponentWillReceiveProps()在子组件里接收到父组件的参数，只要父组件的render函数被重新执行后，该函数被执行

4. 移除时被执行

   componentWillUnmount()组件即将被移除时被执行

7、使用charles进行本地数据模拟

8、使用axios.get(‘url’).then((res)=>{}). Catch(()=>{});获取接口数据

9、Redux

安装：Yarn add redux
工作流程：

10、Antd框架

安装：yarn add antd
多用于后台页面

11、Redux-thunk中间件

安装： yarn add redux-thunk

12、React路由第三方模块

 	  Npm install react-router-dom
     Import {BrowserRouter,Router} from ‘react-router-dom’

13、CSS 与JS实现动画效果

第三方模块React-transition-group实现动画效果
TransitonGroup与CSSTransition

14、Redux开发调试工具：react developr tools

安装之后可以在控制台的react里可以进行：组件结构的查询，查看state数据
Redux DevTools 对reduce进行调试

15、问题：在styled-component 4.X版本中injectGlobal API除去，取而代之的是createGlobalStyle样式组件来使用全局样式。