React 初探

最新推荐文章于 2025-07-15 23:28:19 发布

原创最新推荐文章于 2025-07-15 23:28:19 发布 · 466 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reacr

Javascript 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了React的基本概念和使用方法，包括JSX语法、组件创建、状态管理等核心特性，并通过实例展示了如何利用React构建动态交互式的Web应用。

这里写图片描述

React的特点

他有自己的语法糖他的语句写出来 js也是不认识的必须用特定的语法糖对代码进行转移
他不需要常规的去写 div 啊之类的dom 而是在自己的代码中生成虚拟的dom 然后再添加到网页上成为真实的dom 所以你可能发现一个页面上就一个 div 加上一个 id 就完事了。其他的全在js里面。这样的方式注定了他的代码移植性非常高，组件开发特别的方便。

首先看一个demo (hello world )

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/babel">
    ReactDOM.render(
        <div>hello world!!!</div>,
        document.getElementById('example')
    );
</script>

每个引入的解释

    ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

第二个例子-JSX语法

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
        <div>
            {
                names.map(function (name) {
                    return <div>Hello, {name}!</div>
                })
            }
        </div>,
        document.getElementById('example')
);

上面代码体现了 JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。显示如下：

注意：
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

var arr = [
    <h1>Hello world!</h1>,
    <h2>React is good</h2>,
];
ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
);

这里写图片描述

组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

var HelloMessage = React.createClass({
    render:function(){
        return <h1> hello {this.props.name}</h1>;
    }
});
ReactDOM.render(
        <HelloMessage name="mps" />,
        document.getElementById('example')
);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入时，会自动生成 HelloMessage 的一个实例（下文的”组件”都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，否则会报错，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签.

什么是顶层标签？

就是<div><p></p></div>这是可以的 ,但是<div></div><p></p>就不行

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如，就是 HelloMessage 组件加入一个 name 属性，值为 marain。组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。

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

var HelloMessage = React.createClass({
    render:function(){
        return <h1 className={this.props.className}> {this.props.className}  hello {this.props.name}</h1>;
    }
});
ReactDOM.render(
        <HelloMessage name="mps"   className="red"/>,
        document.getElementById('example')
);

组件参数中this.props.children

var NotesList = React.createClass({
    render: function() {
        return (
                <ol>
                    {
                        React.Children.map(this.props.children, function (child) {
                            return <li>{child}</li>;
                        })
                    }
                </ol>
        );
    }
});
ReactDOM.render(
        <NotesList>
            <span>hello</span>
            <span>world</span>
        </NotesList>,
        document.body
);

组件中的PropTypes和getDefaultProps

PropTypes对传过来的数值类型进行验证

var MyTitle = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired,
    },
    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});
var data = 123;
ReactDOM.render(
        <MyTitle title={data} />,
        document.body
);

getDefaultProps方法可以用来设置组件属性的默认值

var MyTitle = React.createClass({
    getDefaultProps : function () {
        return {
            title : 'Hello World'
        };
    },
    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});
ReactDOM.render(
        <MyTitle />,
        document.body
);

获取真实的DOM节点

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性

var MyComponent = React.createClass({
    handleClick: function() {
        this.refs.myTextInput.focus();
    },
    render: function() {
        return (
                <div>
                    <input type="text" ref="myTextInput" />
                    <input type="button" value="Focus the text input" onClick={this.handleClick} />
                </div>
        );
    }
});
ReactDOM.render(
        <MyComponent />,
        document.getElementById('example')
);

上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

组件状态this.state

组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI

var LikeButton = React.createClass({
    getInitialState: function() {
        return {liked: false};
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? 'like' : 'haven\'t liked';
        return (
                <p onClick={this.handleClick}>
                    You {text} this. Click to toggle.
                </p>
        );
    }
});
ReactDOM.render(
        <LikeButton />,
        document.getElementById('example')
);

上面代码是一个 LikeButton 组件，它的 getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

表单

var Input = React.createClass({
    getInitialState: function() {
        return {value: 'Hello!'};
    },
    handleChange: function(event) {
        this.setState({value: event.target.value});
    },
    render: function () {
        var value = this.state.value;
        return (
                <div>
                    <input type="text" value={value} onChange={this.handleChange} />
                    <p>{value}</p>
                </div>
        );
    }
});
ReactDOM.render(<Input/>, document.body);

组件的生命周期

● Mounting：已插入真实 DOM
● Updating：正在被重新渲染
● Unmounting：已移出真实 DOM

componentWillMount()：组件加载前调用 componentDidMount()：组件加载后调用 componentWillUpdate(): 组件更新前调用 componentDidUpdate(): 组件更新后调用 componentWillUnmount()：组件卸载前调用 componentWillReceiveProps()：组件接受新的参数时调用

AJAX

var UserGist = React.createClass({
    getInitialState: function() {
        return {
            username: '',
            lastGistUrl: ''
        };
    },
    componentDidMount: function() {
        $.get(this.props.source, function(result) {
            var lastGist = result[0];
            if (this.isMounted()) {
                this.setState({
                    username: lastGist.owner.login,
                    lastGistUrl: lastGist.html_url
                });
            }
        }.bind(this));
    },

    render: function() {
        return (
                <div>
                    {this.state.username}'s last gist is
                    <a href={this.state.lastGistUrl}>here</a>.
                </div>
        );
    }
});

ReactDOM.render(
        <UserGist source="https://api.github.com/users/octocat/gists" />,
        document.body
);

这里写图片描述

前面名字用ajax获取 here 可以点击链接

前段时间想了解一下这个 react ，所以在网上搜了一些demo，自己动手试了一遍。只能说能看懂，但是在具体的应用中如何使用，还需要在继续加油学习