生命周期介绍,React学习笔记

By admin in 4858美高梅 on 2019年4月14日

JSX

React中,推出了1种新的语法取名叫JSX,它给了JS中写HTML标签的能力,不须要加引号。JSX的语法看起来是壹种模板,然则它在编写翻译未来,会转成JS语法,只是书写进度中的语法糖。
JSX的解析器会帮我们读取那种语法并加以处理。
上边是3个大致的例证。

const element = <h1 className="greeting">Hello, world!</h1>;

实际一定于如下的代码:

const element = React.createElement({
  'h1',
  {className: 'greeting'},
  'Hello, world!',
  'Xxx'
})

先是个参数是项目,可以是HTML标签,也足以是React组件;第3个参数是props对象;第5个以往参数是children,会根据传入顺序依次排列。
自然第二个参数也得以流传数组,如果第多个参数传入数组,则前边再盛传别的子节点,就会报错。
JSX提供了壹种HTML和JS混合编写的力量。在急需利用JS表明式的地点,用一组花括号包裹起来即可:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1 className="test">
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('app')
);

出于class在js中任重(英文名:rèn zhòng)而道远字,所以采用className去替代。
上边提起了JSX其实是语法糖,所以只要要循环嵌入列表,能够直接将列表传进来:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('app')
);

在控制埃德蒙顿会看到如此的报错:

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.

那是由于react使用virtual
dom来渲染真实节点,在列表渲染时,如若每一种item未有对号入座的key,react处理起增加和删除改时就会非常的慢,所以,渲染列表时,最棒给每1个item增加一个唯1的key。

const listItems = numbers.map((number, index) =>
  <li key={index}>{number}</li>
);

学习资料

react官方首页
https://facebook.github.io/react/
react中文
http://reactjs.cn/react/index.html
React Gitbook 翻译
https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
react中文导航
http://nav.react-china.org/
jsx首页
https://facebook.github.io/jsx/
react教程
http://www.runoob.com/react/react-tutorial.html
https://github.com/facebook/react/wiki/Sites-Using-React

什么是React?
React 是一个用于塑造用户界面包车型大巴 JAVASC帕杰罗IPT 库。
React首要用于塑造UI,很四个人认为 React 是 MVC 中的 V(视图)。
React 源点于 Facebook 的在那之中项目,用来架设 Twitter 的网址,并于 二零一一年 伍 月开源。
React
拥有较高的天性,代码逻辑非常不难,更多的人已开首关心和应用它。
既能够支付浏览器选用,又能够支付活动应用

React 特点
一.评释式设计 −React采取申明范式,可以轻松描述应用。
二.高效 −React通过对DOM的上行下效,最大限度地回落与DOM的互相。
三.灵活 −React能够与已知的库或框架很好地包容。
肆.JSX − JSX 是 JavaScript 语法的恢宏。React 开发不必然使用 JSX
,但大家提出接纳它。
5.组件 − 通过 React
创设组件,使得代码特别便于获取复用,能够很好的使用在大项指标开发中。
陆.单向响应的数码流 − React
实现了一面响应的数据流,从而收缩了再一次代码,那也是它为啥比守旧数码绑定更简便。

什么是JSX?
React 使用 JSX(JavaScript XML) 来代表常规的 JavaScript。JSX
是三个看起来很像 XML 的 JavaScript 语法扩充。我们不必要一定使用
JSX,但它有以下优点:

  • JSX 执行更加快,因为它在编写翻译为 JavaScript 代码后举办了优化。
  • 它是项目安全的,在编写翻译进度中就能发现错误。

  • 行使 JSX 编写模板尤其简约高效。

直白在javaScript里面写xml的语法,使组织越发的明显。基于ES六的语法。

State(状态)
React 把组件看成是三个状态机(State
Machines)。通过与用户的互相,完毕不一样意况,然后渲染
UI,让用户界面和数码保持1致。
React 里,只需革新组件的 state,然后依据新的 state
重新渲染用户界面(不要操作 DOM)。
不供给直接操作DOM,而是经过改动state,自动更新界面

Props(属性)
state 和 props 首要的界别在于 props 是不可变的,而 state
能够依据与用户交互来改变。那正是干什么有个别容器组件需求定义 state
来更新和修改数据。 而子组件只可以通过 props 来传递数据。
能够经过 getDefaultProps() 方法为 props 设置暗中认可值

React组件生命周期

实例化

第三回实例化

  • 生命周期介绍,React学习笔记。getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

实例化达成后的换代

  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

存在期
零件已存在时的图景改变

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

销毁&清理期

  • componentWillUnmount

生命周期共提供了十个不等的API。

1.getDefaultProps
效益于组件类,只调用2遍,重回对象用于安装暗中同意的props,对于引用值,会在实例中国共产党享。

2.getInitialState
职能于组件的实例,在实例创制时调用二回,用于开头化各类实例的state,此时可以访问this.props。

3.componentWillMount
在成就第叁遍渲染以前调用,此时还是可以够修改组件的state。

4.render
必选的形式,成立虚拟DOM,该方法具有卓绝的规则:

  • 只好透过this.props和this.state访问数据
  • 能够重临null、false或任何React组件
  • 只可以冒出一个拔尖组件(不能够回到数组)
  • 无法更改组件的景况
  • 不可能改改DOM的出口

5.componentDidMount
真正的DOM被渲染出来后调用,在该格局中可由此this.getDOMNode()访问到真实的DOM成分。此时已可以行使其它类库来操作这么些DOM。
在服务端中,该方法不会被调用。

6.componentWillReceiveProps
零件接收到新的props时调用,并将其看成参数nextProps使用,此时能够变更组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}

7.shouldComponentUpdate
零件是不是应该渲染新的props或state,再次回到false表示跳过一而再的生命周期方法,通常不需求使用以幸免出现bug。在出现应用的瓶颈时,可因而该方式开始展览适度的优化。
在首回渲染时期仍然调用了forceUpdate方法后,该格局不会被调用

8.componentWillUpdate
收取到新的props大概state后,进行渲染在此之前调用,此时不允许更新props或state。

9.componentDidUpdate
形成渲染新的props可能state后调用,此时得以访问到新的DOM成分。

10.componentWillUnmount
零件被移除在此以前被调用,能够用来做一些清理工科作,在componentDidMount方法中增加的拥有职责都亟需在该办法中收回,比如制造的定时器或抬高的轩然大波监听器。

1.安装

写在后面

React入门上学笔记。

学科可参考:
React 教程 |
菜鸟教程
阮一峰的互连网日志 > React
入门实例教程

团结用React写了八个to-do-list的小demo:
react-todolist

迎接评论建议难题,一起读书。

组件

React中最注重的概念正是组件。

Conceptually, components are like JavaScript functions. They accept
arbitrary inputs (called “props”) and return React elements describing
what should appear on the screen.

零件能够作为是三个函数,钦点了输入(props),就会付给输出(二个React成分)。
成立组件有两种艺术:
1.函数

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2.es6的类

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

第二种方法创设的机件,能够有所内部景色(state)和生命周期函数。
比方只是显示新闻,未有复杂的操作,能够接纳第一种函数方法。假如组件相比较复杂,并且必要在不一样的一世做早先化大概灭绝等工作,就要动用第2种ES六类方式。

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> // React 的核心库
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> // 提供与 DOM 相关的功能
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> // Babel 可以将 ES6 代码转为 ES5 代码

01 React简介

React 是二个用来塑造用户界面的 JAVASC途睿欧IPT 库。

React主要用于创设UI,很多个人觉着 React 是 MVC 中的 V(视图)。

React 源点于 Facebook 的里边项目,用来架设 Facebook 的网址,并于 201三年 5 月开源。

React 拥有较高的性质,代码逻辑十分简单,越来越多的人已初叶关切和使用它。

状态(State)

State类似于props,但它是组件私有的还要完全由组件控制。
下边大家结合一个Clock类来演示State的定义。

import React, {Component} from 'react';

export default class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

在这些组件里,Clock就具有了协调的情形,而不是从外界发出传入。接下来大家扩张五个定时器的效益,来引进生命周期。

import React, {Component} from 'react';

export default class Clock extends Component {
  ...

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID)
  }

  tick () {
    this.setState({date: new Date()})
  }
  ...
}

只顾:在React中,调用setState方法去修改state,会触发View视图层的修改,直接设置state就不会触发state的改动。
地方引进了五个生命周期方法:componentDidMount , componentWillUnmount

componentDidMount 会在组件挂载到DOM节点上从此触发,而
componentWillUnmount 会在组件从节点上移除现在触发。
React还有为数不少生命周期方法,上面做一个详实的表达。

二.主导语法

02 React特点

  1. 证明式设计 −React采纳评释范式,能够轻松描述应用。

  2. 高效 −React通过对DOM的模仿,最大限度地回落与DOM的相互。

  3. 灵活 −React能够与已知的库或框架很好地协作。

  4. JSX − JSX 是 JavaScript 语法的恢宏。React 开发不肯定使用 JSX
    ,但大家建议采用它。

  5. 组件 − 通过 React
    构建组件,使得代码特别便于获取复用,能够很好的使用在大项目标耗费中。

  6. 壹边响应的数据流 − React
    完结了一面响应的数据流,从而减弱了再也代码,那也是它怎么比守旧数码绑定更容易。

生命周期

在React中,二个零部件或许会经历创造、挂载、更新、卸载、销毁这个事件,React为大家提供了钩子函数来在这几个事件触发时进行操作。
他的生命周期能够分成叁大多数:
创建更新销毁
创立组件并将其插入DOM时,上面包车型客车方法会依次触发

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

更新时,将会触发

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

卸载时,触发

componentWillUnmount()

为了进一步直观的查看生命周期方法,能够参见那张图:
4858美高梅 1
图表来源:http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/。
Render阶段,把一部分state和props总计执行。
Commit阶段就是把React组件插入到实际DOM节点上,那一年可以利用DOM。
而Pre-commit阶段就是在插入真实DOM在此以前,这么些阶段能够读取DOM。

<div id="example"></div>
<script type="text/babel">
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
    );
</script>

0三 React安装与行使

实例中大家引入了八个库: react.min.js 、react-dom.min.js 和
babel.min.js:

  1. react.min.js – React 的主题库

  2. react-dom.min.js – 提供与 DOM 相关的法力

  3. babel.min.js – Babel 能够将 ES陆 代码转为 ES5代码,那样我们就能在当下不支持 ES六 浏览器上进行 React 代码。Babel
    内嵌了对 JSX 的帮忙。通过将 Babel 和 babel-sublime
    包(package)1同使用能够让源码的语法渲染上涨到二个崭新的品位。

也得以用npm来安装并创办项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

创建时

三.选用 create-react-app 飞快构建 React 开发环境

04 React JSX

constructor

一.用来伊始化props和state。
二.是唯1能够平素改动state的地方。

$ npm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

简介

React 使用 JSX 来替代常规的 JavaScript。

JSX 是3个看起来很像 XML 的 JavaScript 语法扩张。

大家不必要一定使用 JSX,但它有以下优点:

  1. JSX 执行更加快,因为它在编写翻译为 JavaScript 代码后进行了优化。
  2. 它是项目安全的,在编写翻译进度中就能发现错误。
  3. 利用 JSX 编写模板特别简便易行高效。

getDerivedStateFromProps

一.当state需求从props早先化时利用
贰.尽量不用采用:因为珍爱双方的平等会扩张复杂度
3.老是render前都会被调用
四.超人场景:表单控件获取暗中认可值

在浏览器中开辟 可观察功能

使用JSX

JSX 看起来好像 HTML ,大家得以看下实例:

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

小编们能够在以上代码中嵌套多个 HTML 标签,必要选取一个 div
成分包裹它,实例中的 p 成分添加了自定义属性
data-myattribute,添加自定义属性要求利用 data- 前缀。

JSX能够置身贰个独门文件中,在HTML文件中引进JSX时索要将type=”text/babel”。

render

无法不够的,它实际上主宰了组件到底要渲染成咋样样子。

4.JSX
七个因素,需求2个div嵌套,添加data-属性

在JSX中使用javascript表达式

小编们能够在 JSX 中采用 JavaScript 表明式。表明式写在花括号 {}
中。实例如下:

ReactDOM.render(
    <div>
        <h1>{1+1}</h1>
    </div>
    document.getElementById('example')
);

不可能应用if语句,能够用三元表明式代替。

componentDidMount

一.在UI渲染完毕之后触发
2.只进行二回
三.日常在那么些法子里触发Ajax请求等操作。

ReactDOM.render(
    <div>
    <h1>菜鸟教程</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById('example')
);

React内联样式

React推荐应用内联样式,使用驼峰写法,自动补全px。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

更新时

有三种情形会触发update。
props产生了转移,setState执行,forceUpdate执行。

独自文件

其他

标签内部的表明要求花括号。

允许在模板中插入数组。

React 的 JSX 使用大、小写的预约来分别当地组件的类和 HTML 标签。

forceUpdate

前两种不多说,第四个forceUpdate触发的景色相比较少见,若是Render方法使用了props和state以外的多少,就须要那几个办法。
这里是一个例子。

<script type="text/babel" src="helloworld_react.js"></script>

05 React组件

只顾,原生 HTML 成分名以小写字母伊始,而自定义的 React
类名以大写字母起先,比如 HelloMessage 无法写成
helloMessage。除此而外还要求留意组件类只可以分包一个顶层标签,不然也会报错。

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World!</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

要是大家要求向组件传递参数,可以动用 this.props 对象。

留意,在添加属性时, class 属性要求写成 className ,for 属性要求写成
htmlFor ,那是因为 class 和 for 是 JavaScript 的保留字。

shouldComponentUpdate

壹.控制virtual dom是还是不是会重绘
2.一般能够用pure component自动完结
叁.这么些点子用来做品质优化相关的操作。有的时候state和props的更新其实不会影响dom的显得,未有要求再一次渲染DOM。

JavaScript 表达式

06 React State

React 把组件看成是3个状态机(State
Machines)。通过与用户的互相,达成不一样境况,然后渲染
UI,让用户界面和数码保持一致。

React 里,只需创新组件的 state,然后依据新的 state
重新渲染用户界面(不要操作 DOM)。

以下实例中开创了 LikeButton 组件,getInitialState
方法用于定义初始状态,也正是一个目的,这么些目的能够透过 this.state
属性读取。当用户点击组件,导致意况变化,this.setState
方法就修改意况值,每一遍修改以往,自动调用 this.render
方法,再度渲染组件。

var LikeButton = React.createClass({
    getInitialState: function() {
      return {liked: false};
    },
    handleClick: function(event) {
      this.setState({liked: !this.state.liked});
    },
    render: function() {
      var text = this.state.liked ? '喜欢' : '不喜欢';
      return (
        <p onClick={this.handleClick}>
          你<b>{text}</b>我。点我切换状态。
        </p>
      );
    }
});

ReactDOM.render(
    <LikeButton />,
    document.getElementById('example')
);

getSnapshotBeforeUpdate

一.翻新DOM前被触发,state已经更新
贰.它能够将在此以前DOM的动静传递给componentDidUpdate,然后实行总括处理后更新DOM。
这里三个例证。

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

07 React Props

state 和 props 主要的分别在于 props 是不可变的,而 state
能够依照与用户交互来改变。这正是干什么某些容器组件需求定义 state
来更新和改动数据。 而子组件只可以通过 props 来传递数据。

能够通过 getDefaultProps() 方法为 props 设置暗许值。

Props 验证使用
propTypes,它能够确定保证大家的利用组件被正确利用,React.PropTypes
提供许多证实器 (validator) 来表明传入数据是还是不是管用。当向 props
传入无效数据时,JavaScript 控制台会抛出警示。

componentDidUpdate

一.老是UI更新后都会调用
二.props也许state修改后都会接触

不能够选择 if else 语句,但能够运用 conditional (三元运算) 表达式来替代

08 React组件API

  • 设置境况:setState
  • 轮换状态:replaceState
  • 设置属性:setProps
  • 轮换属性:replaceProps
  • 强制更新:forceUpdate
  • 获取DOM节点:findDOMNode
  • 判定组件挂载状态:isMounted

replaceState()方法与setState()类似,然则方法只会保留nextState中状态,原state不在nextState中的状态都会被去除。

props约等于组件的数据流,它连接会从父组件向下传递至具备的子组件中。当和贰个表面的JavaScript应用集成时,大家恐怕会必要向组件传递数据或通告React.render()组件供给再行渲染,能够选用setProps()。

4858美高梅 ,replaceProps()方法与setProps类似,但它会删除原有。

forceUpdate()方法适用于this.props和this.state之外的零部件重绘(如:修改了this.state后),通过该办法通告React供给调用render(),壹般的话,应该尽量制止使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用。

isMounted()方法用于判断组件是否已挂载到DOM中。可以应用该办法保险了setState()和forceUpdate()在异步场景下的调用不会出错。

卸载时

这么些阶段只会触发二个办法。

ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

0玖 React 组件生命周期

零件的生命周期可分为四个情景:

  • Mounting:已插入真实 DOM
  • Updating:正在被重复渲染
  • Unmounting:已移出真实 DOM

生命周期的主意有:

  • component威尔Mount 在渲染前调用,在客户端也在服务端。
  • componentDidMount 在第壹次渲染后调用,只在客户端。
  • component威尔ReceiveProps 在组件接收到3个新的prop时被调用。
  • shouldComponentUpdate
    在组件接收到新的props或许state时被调用。在早先化时可能采纳forceUpdate时不被调用。
  • component威尔Update
    在组件接收到新的props或许state但还未有render时被调用。
  • componentDidUpdate 在组件达成换代后迅即调用。
  • component威尔Unmount 在组件从 DOM 中移除的时候立刻被调用。

 componentDidMount: function () {};

componentWillUnmount

一.只调用1次
二.方可在那几个点子里清除计时器,关闭部分三番五次等。

以上是JSX、组件概念、props、state、生命周期的牵线。
谢谢阅读。

利用内联样式,不必带px后缀

10 AJAX

React 组件的数额能够透过 componentDidMount 方法中的 Ajax
来获取,当从服务端获取数据库能够将数据存款和储蓄在 state 中,再用
this.setState 方法重新渲染 UI。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

11 表单与事件

当你供给从父组件中更新子组件的 state 时,你要求在父组件通过创立事件句柄
(handleChange) ,并作为 prop (updateStateProp) 传递到您的子组件上。

当你须求从子组件中立异父组件的 state 时,你须要在父组件通过创造事件句柄
(handleChange) ,并视作 prop (updateStateProp) 传递到您的子组件上。

注释
在标签内部的注脚供给花括号
在标签外的的诠释不能够动用花括号

12 React Refs

React 援助壹种分外尤其的性质 Ref ,你能够用来绑定到 render()
输出的任何组件上。

其1新鲜的性质允许你引用 render() 再次来到的对应的辅助实例( backing
instance )。那样就足以确认保证在别的时刻总是拿到正确的实例。

ReactDOM.render(
    /*注释 */
    <h1>孙朝阳 {/*注释*/}</h1>,
    document.getElementById('example')
);

数组
JSX 在模板中插入数组会自动实行具有成员

var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术,更是梦想!</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

渲染 HTML 标签或 React 组件
渲染HTML 标签,只需在 JSX 里使用小写字母的标签名

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

渲染 React 组件,只需创造1个大写字母初步的地方变量

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

由于 JSX 就是 JavaScript,壹些标识符像 class 和 for 不提议视作 XML
属性名(class 和 for 是 JavaScript 的保留字)。作为代表,React DOM 使用
className 和 htmlFor 来做相应的属性。

5.React 组件

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello World!</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

React.createClass 方法用于转移2个零件类 HelloMessage。
<HelloMessage />实例组件类并出口新闻。

向组件传递参数用 this.props 对象

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});


ReactDOM.render(
  <HelloMessage name="Runoob" />,
  document.getElementById('example')
);

复合组件

var WebSite = React.createClass({
  render: function() {
    return (
      <div>
        <Name name={this.props.name} />
        <Link site={this.props.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite name="菜鸟教程" site=" http://www.runoob.com" />,
  document.getElementById('example')
);


6.React State(状态)
var LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: false};
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? '喜欢' : '不喜欢';
        return (
            <p onClick={this.handleClick}>
                你<b>{text}</b>我。点我切换状态。
            </p>
        );
    }
});


ReactDOM.render(
    <LikeButton />,
    document.getElementById('example')
);

开创 LikeButton 组件,getInitialState
方法用于定义初步状态,也便是3个指标,这些目的足以经过 this.state
属性读取。当用户点击组件,导致情状变化,this.setState
方法就修改景况值,每回修改之后,自动调用 this.render
方法,再一次渲染组件。
柒.React Props(与 state 首要的分别在于 props 是不可变的,而 state
可以根据与用户交互来改变)

var HelloMessage = React.createClass({
    render: function() {
        return <h1>Hello {this.props.name}</h1>;
    }
});


ReactDOM.render(
    <HelloMessage name="Runoob" />,
    document.getElementById('example')
);


默认 Props(getDefaultProps() 方法为 props 设置默认值)
var HelloMessage = React.createClass({
  getDefaultProps: function() {
    return {
      name: 'Runoob'
    };
  },
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

在父组件中装置 state, 并通过在子组件上采用 props 将其传递到子组件上

var WebSite = React.createClass({
  getInitialState: function() {
    return {
      name: "菜鸟教程",
      site: "http://www.runoob.com"
    };
  },

  render: function() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
});

var Name = React.createClass({
  render: function() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
});

var Link = React.createClass({
  render: function() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
});

ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);


Props 验证
Props 验证使用 propTypes
var title = "菜鸟教程";
// var title = 123;
var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },

  render: function() {
     return <h1> {this.props.title} </h1>;
   }
});
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);

更加多验证器

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
   optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 可以被渲染的对象 numbers, strings, elements 或 array
    optionalNode: React.PropTypes.node,

    //  React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 可以是多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 特定 shape 参数的对象
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 任意类型加上 `isRequired` 来使 prop 不可空。
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

8.React 组件 API

设置意况:setState(setState()并不会即时改变this.state,而是创造三个将要处理的state。setState()并不一定是一路的,为了进步质量React会批量实施state和DOM渲染。

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

轮换状态:replaceState
replaceState()方法与setState()类似,可是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。

设置属性:setProps

轮换属性:replaceProps
replaceProps()方法与setProps类似,但它会去除原有props

强制更新:forceUpdate
forceUpdate()方法会使组件调用本人的render()方法重新渲染组件,组件的子组件也会调用自身的render()。不过,组件重新渲染时,还是会读取this.props和this.state,假如事态并未有改变,那么React只会更新DOM。
forceUpdate()方法适用于this.props和this.state之外的零部件重绘(如:修改了this.state后),通过该办法文告React供给调用render()
1般的话,应该尽量幸免使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用。

获取DOM节点:findDOMNode

判断组件挂载状态:isMounted
能够行使该办法保险了setState()和forceUpdate()在异步场景下的调用不会出错。

九.React 组件生命周期

组件的生命周期可分为多少个情景:
Mounting:已插入真实 DOM
Updating:正在被再次渲染
Unmounting:已移出真实 DOM

生命周期的方法有:
component威尔Mount 在渲染前调用,在客户端也在服务端。
componentDidMount :
在首先次渲染后调用,只在客户端。之后组件已经转移了相应的DOM结构,能够因此this.getDOMNode()来进行访问。
假诺您想和其余JavaScript框架一起行使,能够在这几个格局中调用setTimeout,
setInterval或然发送AJAX请求等操作(防止异部操作阻塞UI)。
component威尔ReceiveProps
在组件接收到1个新的prop时被调用。这一个艺术在伊始化render时不会被调用。
shouldComponentUpdate
重临3个布尔值。在组件接收到新的props可能state时被调用。在开端化时可能使用forceUpdate时不被调用。
能够在你确认不供给更新组件时选用。
component威尔Update在组件接收到新的props也许state但还不曾render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件达成更新后即时调用。在开端化时不会被调用。
component威尔Unmount在组件从 DOM 中移除的时候立时被调用。

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);


var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

10.React AJAX

var UserGist = React.createClass({
    getInitialState: function() {
        return {
            username: '',
            lastGistUrl: ''
        };
    },


    componentDidMount: function() {
        this.serverRequest = $.get(this.props.source, function (result) {
            var lastGist = result[0];
            this.setState({
                username: lastGist.owner.login,
                lastGistUrl: lastGist.html_url
            });
        }.bind(this));
    },


    componentWillUnmount: function() {
        this.serverRequest.abort();
    },


    render: function() {
        return (
            <div>
                {this.state.username} 用户最新的 Gist 共享地址:
                <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
            </div>
        );
    }
});


ReactDOM.render(
    <UserGist source="https://api.github.com/users/octocat/gists" />,
    document.getElementById('example')
);

React 组件的数据能够透过 componentDidMount 方法中的 Ajax
来取得(上例中选用了jquery的ajax),当从服务端获取数据库能够将数据存款和储蓄在
state 中,再用 this.setState 方法重复渲染 UI。
当使用异步加载数据时,在组件卸载前应用 component威尔Unmount
来撤除未形成的央求。
11.React 表单

安装输入框 input 值value = {this.state.data},使用 onChange 事件来监听
input 的变更,修改 state

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

12.React 事件

onClick 事件

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  handleChange: function(event) {
    this.setState({value: '菜鸟教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <button onClick={this.handleChange}>点我</button>
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);


复用组件
var Content = React.createClass({
  render: function() {
    return  <div>
              <button onClick = {this.props.updateStateProp}>点我</button>
              <h4>{this.props.myDataProp}</h4>
           </div>
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello Runoob!'};
  },
  handleChange: function(event) {
    this.setState({value: '菜鸟教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

13.React Refs

var MyComponent = React.createClass({
  handleClick: function() {
    // 使用原生的 DOM API 获取焦点
    this.refs.myInput.focus();
  },
  render: function() {
    //  当组件插入到 DOM 后,ref 属性添加一个组件的引用于到 this.refs
    return (
      <div>
        <input type="text" ref="myInput" />
        <input
          type="button"
          value="点我输入框获取焦点"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

ReactDOM.render(
  <MyComponent />,
  document.getElementById('example')
);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有