React入门教程(一）

时间  2019-12-09
标签 react 入门 教程 栏目 React 繁體版
原文   原文链接

作前端的人都知道，目前热门前端的框架是 VAR => Vue，Anglur，React。
而若是说最热门的前端框架是谁，毫无悬念是 Reactcss

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

接下来让咱们开始学习 React ，首先学习如何使用React输出一个 Hello React前端

1、Hello React

新建一个 Reactdemo.html ，输入如下内容react

<!DOCTYPE html>
<html>
    <head>
            <meta charset="UTF-8" />
      <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的一个方法。babel

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

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

2、JSX语法

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析dom

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')
    )

3、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 name="cnyballk1"/>
      <Name name="cnyballk2"/>
    </Hello>,
      document.getElementById('root')
    )

是否是很好奇props是什么？别急，接下来就为你讲解

4、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添加类型检查。

5、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 方法，再次渲染组件。

6、组件的生命周期

组件有如下生命周期


  • 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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程