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
-
Fragment 占位符:(用于返回时隐藏最外层标签)
类名.propTypes = { } 规定传参的类型
类名.defaultProp = { } 规定传参的默认值
-
构造函数:
constructor(props){ Super(props); //继承Component父类的构造函数 //定义数据 This.state={ InputValue : ‘’, List : [], } }
-
事件监听:
OnChange 改变State数据
-
点击事件:
onClick
-
List循环:
map((item , index) =>{ } )函数接收回调,内容,下标
-
注释
{/*风格和发挥*/} 或者 { //士大夫发 }
-
用 className定义css样式
HtmlFor定义lable标签
3、组件
- 组件之间传值
新建js文件,在父js文件引入,
父组件通过属性向子组件传值
子组件操作父组件内容需要父组件给子组件传过去与方法:
- propTypes规定父组件传的属性类型(详细见官网)
传递的属性不能为空
- defaultProps用来设置传过来的属性的默认值
4、虚拟DOM
1.每次state数据和props数据发生改变,render函数被重新调用
2.每次发生改变生成新的虚拟DOM,虚拟DOM与真实DOM对比,找到不同,之间改变真实DOM
5、Ref的使用作用
在react里直接获取DOM元素(不建议使用)
6、React的生命周期函数,即某一刻组件自动调用的函数,以下
- 初始化函数
- 第一次在页面运行
ComponentWillMount() 在组件即将被挂载到页面的时刻执行
Render() 函数在组件被挂载到页面时执行
ComponentDidMount() 在组件被挂载到页面后执行 - 更新时执行的函数
ShoudComponentUpdate()在组件被更新之前,自动执行,要求返回bool类型的值
ComponentWillUpdate()在组件被更新之前,ShoudComponentUpdate()函数之后执行
Render()在组件被更新时执行
ComponentDidUpdate()在组件被更新之后执行
特殊ComponentWillReceiveProps()在子组件里接收到父组件的参数,只要父组件的render函数被重新执行后,该函数被执行 - 移除时被执行
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进行调试