react之Hello World

前端之家收集整理的这篇文章主要介绍了react之Hello World前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

背景

Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架,所以产生了react。后来反响很好,所以于2013年5月开源。

<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="Box"></div>
<script type="text/babel">
// 此处script为解决与js语法不兼容问题,必须要加上type="text/babel"
//
</script>
</body>
</html>

1. react三个基本库

  1. react.js: React核心库

  2. react-dom.js: 提供与DOM相关的功能

  3. browser.min.js: 把JXS语法转化为javascript语法

react之'Hello World'

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

ReactDOM.render方法输出HTML方法,是react最基本的方法,将输入的内容插入制定的DOM中

2. JXS语法

在react中,遇到'<'则按照html语法执行,遇到'{'则按照js语法执行,JXS语法允许在模版中插入变量

var str = 'a';
ReactDOM.render(
    <h1>{str}</h1>,document.getElementById('Box')
);
//页面输出a。

如果变量为数组,则展开数组所有成员

var arr = [
    <h1>Hello One!</h1>,<h2>Hello Two</h2>
]
ReactDOM.render(
    <div>{arr}</div>,document.getElementById('Box')
);
//页面直接输出<h1>和</h2>

3. 组件

生成组件方法
//组件名称统一标准,开头字母大写,采用驼峰命名法
//React.creatClass为生成组件的方法,很少出现'定义组件'这个词
//HelloWorld为组件类
//当调用组件,模版插入<HelloWorld />类时,会自动生成一个HelloWorld的实例子
var HelloWorld = React.creatClass({
    reder: function () {
        return {
            //this.props为一个对象,组件的属性可以在生成组件的内部通过this.props 获取
            <h1>{this.prpos.name}</h1>
        }
    }
});

//组件调用
ReactDOM.render(
    <HelloWorld name="HelloWorld" />,document.getElementById('Box')
);

组件为虚拟DOM,这也是react的基本核心思想,通过组件的状态改变来驱动,当状态改变时,只更新DOM,不重新渲染整个页面,这也是和传统js渲染整个页面最本质的区别和优点,即计算出当前虚拟DOM和状态改变后虚拟DOM的差异,只改变差异部分,提供性能

组件的生命周期
1.实例化

由于react的思想是组件的组合,同一个实例第一次创建时,会执行以下方法

  • getDefaultProps

  • getInitialState

  • conponentWillMount

  • render

  • conponentDidMount

getDefaultProps方法

给是实例子设置默认的props值,一般为不可改变的值,另外也是对于父组件没有传递的属性,这个方法返回该实例自己使用的默认props值,该方法只会被调用一次.

当该组件类第二次及后续所有的应用,getDefaultProps方法已经不存在,不会被调用,只执行下面四种方法

  • getInitialState

  • conponentWillMount

  • render

  • conponentDidMount

getInitialState方法

在初始化每个实例的时候都会被调用,并且只调用一次,用来生成默认的状态属性值。

conponentWillMount方法

在每次渲染前被调用,此时还可以修改state的值,等到render方法执行时就state就不可改变了。

reder方法

render会创建一个虚拟DOM,来表示组件输出。对组件来说是唯一必须的方法,并需要满足下面几点条件:

  1. 只能通过this.props和this.state访问数据

  2. 可以返回null、false、或组件

  3. 只能出现一个顶级组件,不能返回一组元素,可用div包裹一层或是用组件包裹

  4. 不可改变组件的状态,或者DOM输出,组件状态只能在setState函数修改

componentDidMount方法

在render方法调用并且DOM已经被渲染后,可以在componentDidMount方法内部通过this.getDOMNode()方法访问。

2.存在期

到这时,组件已经渲染完成,并且用户可以进行操作与组件进行交互,比如表单的change事件,react通过判断组件的状态的改变来作出响应更新DOM

var Input = React.createClass({
    //设置默认state,确定视图状态,一般处理数据的简单变化,长用于表单
    getInitialState: function () {
        return {
            val: 'Hello World'
        };
    },changeInputVal: function (event) {    
        this.setState({
            value: event.target.value
        });
    },render: function () {
        var val = this.state.val;
        return (
            <input type="text" value={value}
            onChange={this.changeInputVal}/  
        );
    }
});

ReactDOM.render(
    <div>
    <Input/>
        //p的innerHTML值就会根据value的改变来更新DOM
        <p>{this.state.value}</p>
    </div> 
    document.getElementById('Box')
);

当input的value变化的时候,就会触发changeInputVal事件,通过setState来改变value的状态值来更新DOM。

3. 销毁和清理期

当react使用完一个组件,这个组件就会从DOM中卸载并被销毁,componentWillUnMount方法就会作出响应,完成清理工作,随后移除顶级结构。

注:react数据流向为单向传递,父级组件传递给子组件,通过this.props在子组件中获取。复合组件使用的总结后续完成发出,今天由于时间关系还有bug需要改,先总结这些基础知识,demo暂时也不先做了。学习资料是结合阮一峰react教程,react中文网及react书籍。

猜你在找的React相关文章