React入门教程

2018-02-09 19:22:11来源:cnblogs.com作者:cnyball_k人点击

分享

做前端的人都知道,目前热门前端的框架是 VAR => Vue,Anglur,React。
而如果说最热门的前端框架是谁,毫无悬念是 React

React 是由 Facebook 主导开发的一个 JavaScript 框架。学习 React 需要你拥有基本 JavaScript 和 HTML 知识

接下来让我们开始学习 React ,首先学习如何使用React输出一个 Hello React

一、Hello React

新建一个 Reactdemo.html ,输入以下内容

<!DOCTYPE html><html>    <head>      <title>Hello React</title>      <script crossorigin  src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>      <script crossorigin  src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>      <script crossorigin  src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>    </head>    <body>      <div id="root"></div>      <script type="text/babel">        //我们的React代码在这里       ReactDOM.render(         <h1>Hello, React</h1>,         document.getElementById('root')       )      </script>    </body></html>

运行试试看!Hello,React!

上面代码一共用了三个库:react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,babel.js 的作用是将 JSX 语法转为 JavaScript 语法。

接下来让我们看看代码,在 ReactDOM.render 函数里 我们看到的是一个类似与XML/HTML的语法,但实际上他不是HTML,它就是基于 JavaScript,在 React 当中的一种语法扩展的实现。例如上面JSX语法经过转换后会变成React创建Element的一个方法。

    ReactDOM.render(     React.createElement('h1',null,'Hello, React'),     document.getElementById('root')    )

而 ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点(例子中是id为root的节点)。

二、JSX语法

JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析

JSX表达式

把下面的代码运行试试看!

    var str = 'cnyballk'    ReactDOM.render(      <h1>Hello, {str}</h1>,      document.getElementById('root')    )

在{}你可以使用任何js表达式,如果str变量是数组,它还会帮你展开,例:

    var str = [1,2,3]    ReactDOM.render(      <h1>Hello, {str}</h1>,      document.getElementById('root')    )
JSX嵌套

在JSX里的标签也可以像 HTML 一样相互嵌套,需要注意的是,JSX 在嵌套时,最外层有且只能有一个标签

    var str = 'cnyballk'    ReactDOM.render(      <h1>Hello, {str}      <p>我是p元素</p>      </h1>,      document.getElementById('root')    )

如果是这样就会报错,所以要注意哦~

    var str = 'cnyballk'    ReactDOM.render(      <h1>Hello, {str}</h1>      <p>我是p元素</p>,      document.getElementById('root')    )

三、React组件

React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件,React官方对组件的定义是指在UI界面中,可以被独立划分的、可复用的、独立的模块。组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。
新版本的React里提供了两种定义组件的方法:
第一种函数定义组件,我们只需要定义一个接收props传值:

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

第二种是使用ES6的语法,类的概念来定义React组件:

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

这里要注意的是组件的首字母必须是大写,Hello不能写成hello,否则会报错。

那么怎么使用呢:

    ReactDOM.render(      <div>        <Hello name="cnyballk1" />        <Hello name="cnyballk2" />      </div>,      document.getElementById('root')    )
组件内嵌套组件

组件也是可以嵌套组件的,对于React来说,一个网页就是由不同的组件组合而成,组件互相包含

 class Hello extends React.Component{      render (){      return <div>      {        this.props.children.map(function (child) {          return <h1>Hello,{child}</h1>;        })      }      </div>      }    }  class Name extends React.Component{    render(){      return <span>{this.props.name}</span>    }  }  ReactDOM.render(    <Hello name="cnyball1">      <Name name="cnyballk1"/>      <Name name="cnyballk2"/>    </Hello>,      document.getElementById('root')    )

是不是很好奇props是什么?别急,接下来就为你讲解

四、Props

props其实就是属性Properties的缩写。

组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取

添加组件属性,有一个地方需要注意,就是 class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。

props是只读的

在React中,props都是自上向下传递,从父组件传入子组件。并且props是只读的,我们不能在组件中直接修改props的内容。也即是说组件只能根据传入的props渲染界面,而不能在其内部对props进行修改。

props类型检查

组件的属性可以接受任意值,字符串、对象、函数等等。但是有时我们需要一种机制,为了避免错误类型的内容传入,我们可以为props添加类型检查。

五、State状态

组件免不了要与用户互动,而state就好比状态机,保存着组件的状态,下面通过一个计数器的例子来说下state的用法以及需要注意的地方:

 class Button extends React.Component{   constructor(props){     super(props)     this.state = {       num:1     }     this.handlerClick = this.handlerClick.bind(this)   }   handlerClick(){     this.setState({num:this.state.num+1})   }   render (){     return <button onClick={this.handlerClick}>{this.state.num}</button>   } }  ReactDOM.render(        <Button />,      document.getElementById('root')    )

在React中我们通过类定义组件声明一个有状态的组件,在构造方法初始化state,之后可以用过this.state来访问它,初始化state之后,如果我们想改变它,是不可以直接对其赋值的,直接修改state的值没有任何意义,不会触发组件的重新渲染。

所以需要this.setState这个方法,在改变state的同时,触发React内部的一系列函数,最后调用 this.render 方法,再次渲染组件。

六、组件的生命周期

组件有以下生命周期


  • componentWillMount
    组件即将挂载

  • componentWillReceiveProps
    组件即将接收props

  • shouldComponentUpdate
    返回是否需要更新组件的判断

  • componentWillUpdate
    组件即将更新

  • componentDidMount
    组件已挂载

  • componentDidUpdate
    组件已更新

  • componentWillUnmount
    组件即将卸载


为了更好的方便理解生命周期,让我们来看看是生命周期是如何流转的:

class Nums extends React.Component {  constructor(props) {    super(props)    console.log(`子组件构造函数触发`)  }    componentWillMount() {      console.log(`组件即将挂载`)   }    componentDidMount() {      console.log(`组件已挂载`)      console.log(`   `)   }    componentWillReceiveProps(newProps) {       console.log(`组件即将接收props`)   }      componentWillUpdate(nextProps, nextState) {      console.log(`组件即将更新`)   }    componentDidUpdate(prevProps, prevState) {      console.log(`组件更新完毕`)      console.log(`   `)   }    componentWillUnmount() {      console.log(`组件即将卸载`)   }   shouldComponentUpdate(newProps, newState) {      console.log(`返回判断是否要更新组件true`)      return true;   }   render() {      console.log(`组件渲染中`)      return <h1>{ this.props.counter }</h1>   }} class App extends React.Component {  constructor(props) {    super(props)    this.state = {      counter: 0    }    console.log(`父组件构造函数触发`)    console.log('this.state', this.state.counter)  }   upCounter() {    console.log('改变前的counter', this.state.counter)    this.setState((prevState) =>({      counter:(function(){        console.log('改变后的counter', prevState.counter + 1)        return  prevState.counter + 1      })()    }))  }    render() {    console.log(`父组件渲染中`)    console.log('准备传入的counter', this.state.counter)    return (      <div>        <Nums counter={this.state.counter} />        <button onClick={() => this.upCounter()}>+1</button>        <button onClick={() => this.forceUpdate()}> 更新组件</button>        <button onClick={() => {ReactDOM.unmountComponentAtNode(document.getElementById('root'))}}>          卸载组件        </button>      </div>    )  }} ReactDOM.render(  <App />,  document.getElementById('root'))

打开控制台,点击按钮,便可以看到我们的生命周期流转的状态。

了解React组件渲染的流程和原理对我们更深入React非常有帮助,如果你需要发起AJAX来获取数据渲染,可以放在合适的生命周期里。

总结

React到这里就结束了,尽管没有很深入去React,但是如果你认真看了并且去学习,你就已经能够使用React去写一些小demo了,如果你有什么问题,可以留言给我,如果我看到了,我会回复的。

下次我会更加深入的去讲解React

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台