【React篇】-- 学会不过两三天。

原创 qq873241789 随笔 框架 218阅读 2017-05-11 19:21:23 举报

【React篇】-- 学会不过两三天。

由于刚加入的新公司用到的都是React框架,所以Vue框架只能放一边了。开始学习之旅。

一、概念

React负责MVC里面的V。可以理解为是负责视图的一个东西。但是不提供ui。
React起源于Facebook的内部项目,由于傲娇对所有javascript MVC框架都不满意,就做了这样的一个东西。2013.5开源。设计思想独特,性能出众。
先贴上我看的一篇教程 阮一峰 React教程
阿里云课堂的视频,精简短小 全是重点 阿里云react教程

二、规则

1.React使用JSX 语法,script标签type属性为 text/babel 。
2.必须首先加载三个库:react(核心库)、react-dom(提供dom相关功能)、browser(JSX转为js语法)。
3.ReactDOM.render(添加的模版,插入的dom节点)。
4.JSX语法规则,遇到HTML标签(< 开头),就用HTML解析,遇到代码块({ 开头),就用js规则解析。
5.React.createClass 生成组件类, 1. 每个组件都必须有自己的render方法,return输出组件。2. 第一个字母必须大写,只能包含一个顶级标签。
6.组件属性在 this .props对象获取,添加组件属性时,class需要改写className,for改写htmlFor。
7.this.props.children 属性能获取组件的子节点,React提供React.Children处理,有三种情况。1. 当组件没有子节点为undefined,2.有一个子节点数据类型为object,3.有多个子节点为array。使用React.Children.map遍历子节点,就不用担心以上的情况。
8.propTypes 属性,验证组件实例属性是否符合要求。
9.getDefaultProps 方法用来设置组件属性的默认值。
10.组件并不是真实的dom节点,所以的dom变动先发送在虚拟dom上,再讲实际发送变化反映在真实dom上--- DOM diff。获取真实dom用到ref属性。
11.getInitialState 定义初始状态(对象),这个对象可以通过this.state属性读取,通过this.setState方法修改状态值,修改后自动调用this.render重新渲染组件。
* this.props一旦定义就不能改变状态,this.state是随用户互动而产生变化的特性。

12.声明周期: 1. Mounting(已插入真实DOM) 2. Updating(正在被重新渲染) 3. Unmounting(已移出真实DOM) * 每个状态都提供两种处理函数,will进入之前调用,did进入状态之后调用。
getInitialState 最先被调用。
componentWillMount() 插入真实DOM 之前。(常用)
componentDidMount() 插入真实DOM之后。(常用)
componentWillUpdate(object nextProps , object nextState) 正在重新渲染之前。对比setState才会重新渲染
componentDidUpdate(object prevProps , object prevState) 正在重新渲染之后。
componentWillUnmount()移除真实DOM之前。(主要作用是释放内存,但是由于浏览器可以释放,所以也不常用)
特殊状态的处理函数
comonentWillReceiveProps (object nextProps)已加载组件收到新的参数时调用。
shouldComponentUpdate(object nextProps,object nextState)组件判断是否重新渲染时调用。

*组件中的style属性的设置方式要写两个大括号,第一重大括号表示这是js语法,第二重大括号表示样式对象。

13.通过componentDidMount方法设置ajax请求,请求成功,再用this.setState方法重新渲染UI。

--------------------------------练习DOM的笔记-------------------------------------------
14.特别要注意,组件添加的属性不能用html的属性,如class换成className。属性的值也可以是object。
15.只能有一个顶层标签!
16.ReactDOM.findDOMNode获取真实dom。
17.新建项目的一个不错的 说明。github

tips:特别注意的一些东西。

【React篇】--学会不过两三天。
18.总得来说:
(1)React.createClass定义组件允许传入一些配置:
----------可有可无的属性-----------------
getDefaultProps 得到默认属性对象
propTypes 属性检测规则
mixins 组件间公用方法
-----------初次创建组件时调用-----------------
getInitialState 得到初始状态对象
componentDidMount 这就是一个插入真实dom之后的钩子,只有在客户端调用,或许原生节点
render 返回组件树,必须设置
-----------组件属性值改变时调用-----------------
componentWillReceiveProps 属性改变嗲用
shouldComponentUpdate 判断是否需要重新渲染
render 返回组件树,必须设置
componentDidUpdate 渲染到dom树中是调用,可用于获取原生节点
componentWillUnmount 组件从dom销毁前调用
----------用得比较多的API-----------------
React.createClass 创建组件类
React.findDOMNode 从组件实例获取dom根节点
ReactDOM.render 渲染组件到dom
React.Children 操作 map/ forEach children 工具类

三、官网手册

1.JSX -- 也叫反应元素

1.他是一个语法扩展js,可以把表达式嵌入JSX。
const element = <h1>{这里写表达式,一定要写在大括号里面!}</h1>;因为会jsx会被编译,所以内部可以写if for。
2.指定属性。可以使用引用指定字符串属性,也可以使用花括号将js表达式嵌入到属性。
3.指定孩子JSX,直接写包含的子标签(不要使用HTML属性名称),用 /> 关闭 空标签。
4.防止XSS,在渲染前转换内容为一个字符串。
5.React.createElement是用创建对象的形式来创建一个JSX。(这种方法会执行一些检查,查找错误代码)
6.如果是一个变量用{包裹变量},如果是一个对象作为属性的话,使用{...开头}的写法。可以复写,后面的属性覆盖前面的。

2.呈现元素

1.DOM渲染一个反应元素(JSX代码)到一个根节点,通过ReactDom.render()。
2.更新显示元素,把反应元素渲染操作封装起来,用定时器实时刷新。
官方更新显示元素的栗子

3.组件
  1. 组件把ui分割成独立的、可重用的部分,孤立的每一块。就像js函数,接受任意输入props并返回反应元素描述在屏幕上。
    2.最简单的方法编写组件是用js函数。组件名称以大写字母开始。
    3.一个组件可以重复使用。
    4.提取组件,其实就是把一个大的组件,按照功能用js的方式分解成小组件。然后在大组件中引用这些。
4.状态和生命周期

1.向类添加本地状态:1.在render方法中中把this.props.date 换成 this.state.date。
2.添加一个类构造函数constructor 分配初始this.state。(需要通过props参数)
3.删除标签的属性。
2.用声明周期的方法。
其他都一样,添加两个周期钩子,componentDidMount插入dom之后在定时器做些事情,component
WillUnmount插入dom之前清理定时器。

  • this.props this.state是异步更新。
    3.data数据流。自上而下 、单向的数据流。
5.处理事件

1.在标签中使用 onClick={函数名}的形式。
2.取消默认行为直接在标签return false。
3.如果做其他事情,需要添加preventDefault,再做一些事情。

6.有条件的呈现

1.使用if判断真假渲染元素,或者使用三目运算符判断。
2.元素变量,使用点击事件改变值的真假,重新渲染dom。
3.内联if 与 逻辑 && 操作符。
4.内联三目运算符。

7.列表和key

1.定义一个变量,使用map方法改变变量的方法插入到模版中。
2.渲染重复内容需要提供一个key属性。使用 xx.toString方法修复这个问题。
3.key是为了识别哪些list需要改变、删除、添加。不一样的key给元素一个稳定的身份。

【Flux篇】

React只涉及UI层,还需要搭配一个前端框架,Flux是构建客户端Web应用的应用架构,利用单向数据流的方式组合组件。

1.核心

1.dispatcher -- 事件调度中心(派发器),接受Actions、执行回调函数。只能有一个,是全局的。
2.Store -- 封装业务逻辑、数据交互 ,有一个listSotre,存放所有数据。对外只暴露getter。禁止直接操作Store。
3.view -- 视图层、容器。从store获取数据传递到子组件。是唯一操作state的地方。

2.View

1.所以的子组件都存放在controller中,然后通过controller转发给子组件。
2.每一个Action都是一个对象,包含一个说明动作的类型属性,和传递数据的其他属性。
3.dispatcher 将Action派发到Store,只能有一个,而且是全局的。
4.Store保存状态,存放所有数据的地方。

谈一谈我对 React Flux 架构的理解
React 技术栈系列教程-- 阮一峰

【React Router篇】

1.router 就是 React的一个组件,路由还是需要Route组件定义。history:hashHistory表示路由切换通过hash变化决定。
2.嵌套路由,注意需要先加载的父组件中添加 this.props.children(这个属性就是展示子组件)
3.子组件不一定卸载嵌套的Router组件里面,可以单独传入Router组件的routes属性。
4.path属性是指定路由的匹配规则。
5.通配符,path属性可以使用通配符匹配,匹配url的一部分,直到遇到下一个/、?、#.通过this.props.params.paramName获取。
6.IndexRoute组件,如果路径不加 /,不会加载任何子组件,this.props.children会返回undefined。添加IndexRoute组件<IndexRoute component={Home}/>,这样就能指定Home是根路由的子组件,可以把IndexRoute想象成某个路径的index.html。没有路径参数path。
7.Redirect组件用于路由跳转,由这个路由跳转到另一个路由。
8.IndexRedirect组件访问根路由的时候,重定向到某个子组件。
9.Link组件取代a 标签,生成链接,接受Router状态,activeStyle属性添加class,也可以使用activeClassName指定路由的class。
10.链接到根路径,使用IndexLink组件。
11.histroy,监听浏览器地址变化,把url解析成地址对象。
browserHistory 路由通过URL的hash部分切换。
browserHistory 通过正常路径切换。
createMemoryHistory 用于服务器渲染,创建内存的history对象,不与浏览器url互动。
12.表单处理使用 browserHistory.push 或者 context对象。
13.每个路由都有Enter 和 leave钩子,也就是进入、离开路由时触发。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复