1.react的基础知识

React 的基础之:JSX 语法

react 使用 JSX 语法,js 代码中可以写 HTML 代码。

let myTitle = <h1>Hello, World!</h1>;

JSX 语法解释:

  (1) JSX 语法的最外层,只能有一个节点:

//错误
let myTitle = <p>Hello</p><p>World</p>

  (2) JSX 语法中可以插入 JavaScript 代码,使用大括号。

let myTitle = <p>{'Hello' + 'World'}</p>

Babel 转码器

  js 引擎(包括浏览器和 Node)都不认识 JSX,需要首先使用 Babel 转码,然后才能够运行。

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
  // ** 这里添写代码! **
</script>

  React 需要加载两个库:React 和 React-DOM,前者是 React 的核心库,后者是 React 的 DOM 适配库。

  Babel 用来在浏览器转换JSX语法,如果服务器已经转好了,浏览器就不需要加载这个库。


React基础之React组件

  React 允许用户定义自己的组件,插入网页。

示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜鸟教程 React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        class MyComponent extends React.Component {
            render() {
                return <h1>Hello world</h1>;
            }   
        };

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

结果:

React组件的语法解释

  • class MyComponent extends React.Component 是 ES 6语法,表示自定义一个 MyComponent 类,该类继承了积累 React.Component 的所有属性和方法。
  • React 规定,自定义组件的开头字母必须大写,比如 MyComponent 不能写为 myComponent,以便于与内置的原生类相区分。
  • 每个组件都必须有 render 方法,定义输出的样式。
  • <MyComponent/> 表示生产一个组件类的实例,每一个实例一定要有闭合标签,写成 <MyComponent></MyComponent> 也可以。

组件的参数

组件可以从外部传入参数,内部使用this.props获取参数。

示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        class MyComponent extends React.Component {
            render() {
                return <h1 style={{color: this.props.color}}>
                           {this.props.name}
                      </h1>;
            }   
        };

        ReactDOM.render(
            <MyComponent name='Hello world' color='red' />,
            document.getElementById('example')
        );
    </script>
  </body>
</html>    

 结果:

语法解释

  • 组件内部通过this.props对象获取参数。

组件的状态

组件往往会有内部状态,使用this.state表示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        class MyComponent extends React.Component {
            constructor(... args) {
                super(...args);
                this.state = {
                    test: 'Hello State',
                    isClicked: false
                };
            }

            handleClick() {
                let isClicked = !this.state.isClicked;
                this.setState({
                    isClicked : isClicked,
                    text: isClicked ?  'Hello State' : Date();
                });
           }

            render() {
                return <h1 onClick={this.handleClick.bind(this)}>
                              clikc to : {this.state.text}
                         </h1>
            }

        };

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

语法解释

class MyTitle extends React.Component {
    constructor(...args) {
        super(...args);
        this.state = {   
           name: '访问者'
        }
    }
}

constructor是组件的构造函数,会在创建实例时自动调用。...args表示组件参数,super(...args)是ES6规定的手法。this.state对象用来存放内部状态,这里是定义初始状态。

<div>
    <input type="text" onChanges={this.handleChange.bind(this)}>
    <p>你好,{this.state.name}</p>
</div>

this.state.name表示读取this.state的name属性。每当输入框有变动的时候,就会自动调用onChange指定的监听函数,这里是this.handleChange, .bind(this)表示该方法内部的this,绑定当前组件。

handleChange(e) {
    let name = e.target.value;
    this.setState({
        name: name
    });
}

this.setState方法用来重置this.state,每次调用这个方法,就会引发组件的重新渲染。


组件的生命周期

React为组件的不同生命周期,提供了近十个钩子方法。

钩子方法:是对于抽象方法或者接口的一个空实现。

现实中的一应用,想要实现某个接口中的一个方法(该接口中有多个方法),先用一个抽象类实现这个接口,然后用abstract修饰想要实现的方法,然后其他方法都使用空实现,然后子类继承抽象类即可。这里的空实现方法就是钩子方法。

  • componentWillMount():组件加载前调用。
  • componentDidMount():组件加载后调用。
  • componentWillUpdate():组件更新前调用。
  • componentDidUpadte():组件更新后调用。
  • componentWillUnmont():组件卸载后调用。
  • componentWillReceiveProps():组件接受新参数时调用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏柠檬先生

jquery事件绑定

.bind()   为一个元素绑定一个元素处理程序。   .bind(eventType[,eventData],handler(eventOb...

2107
来自专栏HTML5学堂

一个setInterval的小问题

一个setInterval的小问题 HTML5学堂:在制作页面动画效果中,很多情况都会用到定时器,setInterval则是计时器的一种,可按照指定的周期,不停...

3589
来自专栏柠檬先生

jquery基本选择器

关于基本选择器包括  “*” ,“.class”,"element","#id","selector1  selementN" "*" 选择器,可以找到文档中的...

1879
来自专栏WebDeveloper

使用css3属性处理单词的换行和断词

1703
来自专栏积累沉淀

JavaScript DOM操作表格及样式

一.操作表格 <table>标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table...

22710
来自专栏柠檬先生

jquery的基本选择器

关于基本选择器包括 “*” ,“.class”,"element","#id","selector1 selementN" "*" 选择器,可以找到文档中的所...

2069
来自专栏编程微刊

jQuery文档对象模型DOM的实际应用

DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中...

953
来自专栏coding for love

CSS常用布局实现03-水平垂直居中

其实,水平居中和垂直居中都是水平垂直居中的一部分,所以这一章节所讲到的方法稍微改下就可用于前面两章。说道水平垂直居中,那么居中的元素肯定是有宽度和高度的,要么是...

961
来自专栏HTML5学堂

querySelector与querySelectorAll

HTML5学堂:JS获取节点的方法很多,但真正常用的或许就是通过id和标签获取节点,用传统的几种方法想要快速的查找到某个标签,就意味着需要更多的id,命名多了自...

3647
来自专栏Android先生

Android开发人员不得不学习的Vue.js基础

Vue是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一...

1442

扫码关注云+社区

领取腾讯云代金券