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

javascript|react使用笔记及生命周期
文章图片




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的知识也能在其他平台系统上开发应用,而不只是写网页。等等
实现方式:
javascript|react使用笔记及生命周期
文章图片

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会自动销毁对子组件的引用(当子组件删除时)

this.focusInput=::this.focusInput focusInput(){ this.setState({userInput:''},()=>this.refs.theInput.focus()) }

16.组件分为两类分别是:
container:主要是获取数组,状态更新,关乎逻辑的
component:主要是控制界面样式和布局的
转载于:https://www.cnblogs.com/cxdxm/p/6860919.html

    推荐阅读