javascript|react使用笔记及生命周期 ui|webpack

文章图片

react-intl：做国际化的
【javascript|react使用笔记及生命周期】react只是dom的一个抽象层，并不是web应用的完整解决方案。它没涉及到代码结构和组件之间的通信
react components的生命周期，在浏览器中的三个状态：
Mounted（React.renderComponent()）:React components被render解析生成对应的DOM节点并被插入浏览器的DOM结构的一个过程。
update(setState(),setProps()):一个mounted的React Components被重新render的过程。重新渲染的过程并不是说相应的dom一定会发生变化， react会把这个component的当前state和最近一次的state进行对比。只有当state确实发生了改变，并且影响到了dom结构的时候，react才会去更新dom。
Unmounted: 一个mounted的react Components对应的DOM节点被从DOM结构中移除的这样一个过程。每一个状态react都封装了对应的hook（钩子）函数，在对特定的事件进行
1.原生HTMl元素名以小写字母开头，而自定义的React类名以大写字母开头，比如HelloMessage不能写成helloMessage.除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错
react主要是view层
数据单向绑定
2.虚拟DOM结构：
react很快，很轻。他之所以快就是因为它有一套虚拟DOM的存在，react内部还实现了一个低复杂度高效率的Diff算法，不同于以往框架。例如angular使用的脏检查。在应用的数据改变之后，react会尽力少的比较，然后根据虚拟DOM只改变真实DOM中需要被改变的部分。React也借此实现了它的高效率、高性能。这并不是虚拟DOM唯一的意义，比如react native的实现，可以让你只掌握js的知识也能在其他平台系统上开发应用，而不只是写网页。等等
实现方式：

文章图片

3.react生命周期
componentWillMount():只会在装载之前调用一次，在render之前调用，你可以在这个方法里面调用setState改变状态，并且不会导致额外调用一次render。componentWillMount(){//写自己的业务逻辑代码}
componentDidMount():只会在装载完成之后调用一次，在render之后调用，从这里开始可以通过ReactDOM.findDOMNode(this)获取到组件的DOM节点。用法同上
getDefaultProps，getInitialState：只会在装载之前调用一次
getInitialState():在组件的生命周期中仅执行一次，设置组件的初始化状态
更新组件触发（这些方法不会在首次render组件的周期调用）
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
卸载组件触发：componentWillUnmount
组件初始化：getDefaultProps——>getInitialState——>componentWillMount——>render——>componentDidMount
组件props更新：componentWillRecevieProps——>shouldComponentUpdate——>(如果返回true)componentWillUpdate——>render——>compongentDidUpdate
组件卸载：componentWillUnmount
4.react属性与事件
state属性：state对模块来说是自身的属性。state对当前组件做了更新之后会立马反应virtual dom，virtual dom再反应到DOM。过程是自动的。state属性的作用域只在当前的class中。更新时只更新需更新的内容，不会整个界面更新

export default class jsx extends React.Component{ constructor(){//类的初始化构造函数 super(); //调用基类的所有的初始化方法 this.state={name:'hhm'} //初始化赋值 } render(){ this.setState({name:'hah'}) //更改state值 return({this.state.name}/p> ) } }

5. props属性
props和state一样同属于component,prop对模块来说是外来的属性
6.父向子传：
定义：//父
接收：{this.props.myprops}
//子
7.子向父传（必须是函数）：
//父组件

handleChildValueChange(event){this.setState({name:event.target.value}); }

//子组件

8.子组件把从父组件拿到的值传给它的子组件
传： //...this.props是获取所有父元素的属性值， id={4}是你自己要扩展的值名字可以随便起
取：{this.props.name}

9.组件：组件时构建在元素的基础之上的。是指在UI界面中，可以被独立划分的，可复用的，独立的模块
无状态函数式组件，没有内部的state，不需要组件生命周期函数，可写成纯函数的形式。
10.规定传参的参数类型

header.propTypes = {//header为你的类型name：PropTypes.string, //项目中引入import PropTypes from 'prop-types' 才可以直接用PropTypes.age: React.PropTypes.number.isRequired //isRequired 代表必传项，不传会报警告}

//如果某个参数非必传没有传时我们可以给它定义默认值

header.defaultProps = { name: 'header'}

11.事件和属性的双向绑定
　事件的绑定：

constructor(){ super(); //调用基类的所有的初始化方法 this.state={name:'hhm'} //初始化赋值 }; changeName(k){ this.setState({name:k}) //更改state值 }; render(){ return( {this.state.name} ) }

12.组件的Refs
1.refs是访问到组件内部DOM节点唯一可靠的方法。2.refs会自动销毁对子组件的引用。3.不要在render或render之前对refs进行调用。4不要滥用refs
操作DOM元素：
第一种方法：

var btn=document.getElementById('btn')；ReactDOM.findDOMNode(btn).style.color ='red'

第二种方法：

this.refs.btn.style.color ='red'

13.独立组件间共享Mixins
用于在不同组件间共用代码，跟界面有类似的生命周期
1.安装react-mixin
2.创建存放共享资源的js文件（mixin）

constMixinLog={ log(){ return 'hhm' } }; export default MixinLog

3.在需要mixin的组件里引用

import ReactMixin from 'react-mixin'; import MixinLog from './mixins'; ReactMixin (header.prototype,MixinLog) //header是你组件的类名ReactMixin .log(); //使用

14.react样式

//内联样式,动画，伪类等不能使用
render(){ const styleHeader = { backgroundColor:"#333", color:"#fff", "padding-top":"15px" }; return() }
//引入外部样式

　内联样式的表达式

export default class ComponentHeader extends React.Component{ constructor(){//初始化构造函数 super(); this.state = {head:false} } ; switchHeader(){ this.setState({ head:!this.state.head }) }; render(){ const styleHead = { "padding-top":(this.state.head) ? "3px" : "15px", paddingBottom:(this.state.head) ? "3px" :"15px" } } ; return( this.switchHeader.bind(this)}> ) }

css模块化
模块化可以解决全局污染，命名混乱，依赖管理不彻底，无法共享变量，代码压缩不彻底
优点：1.所有样式都是local的，解决了命名冲突和全局污染问题
2.class名生成规则配置灵活，可以用webpack来压缩class名
3.只需引用组件的JS就能搞定组件所有的js和css
4.依然是css，几乎零学习成本
1.安装babel-plugin-react-html-attrs（在react中可以用class而不用一定要写成className）,(style-loader,css-loader)主要用于css模块化
2.引入使用
在样式表中定义css时：
：local(.trl){color:red}//默认情况下就是：local可以不写
：global(.trd){color:red}//如果想要把该样式污染到全局可以加global

var footerCss = require("../../css/footer.css")

jsx样式和css的互转：在线工具http://staxmanade.com/CssToReact/
Babel是编译JSX用的
Ant Design样式框架介绍
material-ui：谷歌出的样式框架，主要用于react
ant design：阿里的蚂蚁金服出的，它是按需加载
使用：
1.安装 npm install antd --save
2.在你的js里引入import {input} from 'antd' //要用什么就在{}里写什么
引入css ：import 'antd/dist/antd.css '
15.react router
1.安装：npm install --save react-router
2.使用

import React from 'react'; import ReactDOM from 'react-dom'; import Index from './index'; //程序入口的index import List from './list'; import {Router,Route,hashHistory} from 'react-router'; export default class Root extendss React.Component{ render(){ return( //这里替换了之前的index，变成了程序的入口 //history控制前进后退 //route里可以嵌套子链接，写法相同 //在index.js写{this.props.children}
//id是要传递的参数，界面接收时用{this.props.params.id} ) } } ReactDOM.render(,document.getElementById('entry'))import {Link} from 'react-router'
//这里用反引号
首页

list

DOM操作：
findDOMNode():当组件加载到页面之后(mounted)，你可以通过react-dom提供的findDOMNode()方法拿到组件对应的DOM。但是它不能用在无状态的组件上。

import {findDOMNode} from 'react-dom'; componentDidMound(){ const el = findDOMNode(this); }

refs:
另外一种方式就是通过在要引用的DOM元素上面设置一个ref属性指定一个名称，然后通过this.refs.name来访问对应的DOM元素.
如果ref是设置在原生HTML元素上，它拿到的就是DOM元素，如果设置在自定义组件上，它拿到的就是组件的实例，这时候就需要通过findDOMNode来拿到组件的DOM元素。
因为无状态组件没有实例，所以ref不能设置在无状态组件上，一般来说这没什么问题，因为无状态组件没有实例方法，不需要ref去拿实例调用相关的方法，但是如果想要拿无状态组件的DOM元素的时候，就需要用一个状态组件封装一层，然后通过ref和findDOMNode去获取。
refs会自动销毁对子组件的引用(当子组件删除时)