react之Hello World

发布时间：2020-12-15 07:15:49 所属栏目：百科来源：网络整理

导读：背景 Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。 !DOCTYPE htmlhtmlheadscript src="react.js"/scriptscript src="react-dom.js"/scriptscript src="browser.min.js"/script/headbody

背景

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三个基本库

react.js: React核心库
react-dom.js: 提供与DOM相关的功能
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,来表示组件输出。对组件来说是唯一必须的方法,并需要满足下面几点条件：

只能通过this.props和this.state访问数据
可以返回null、false、或组件
只能出现一个顶级组件,不能返回一组元素,可用div包裹一层或是用组件包裹
不可改变组件的状态，或者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书籍。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!