React介绍(讲人话)

React 背景知识

  React
是一个用于构建用户界面的 JavaScript 库,主要用来构建 UI,而未是一个 MVC
框架,但足以用 React 作为 MVC 架构的 View
层轻易的于曾经产生路蒙使,它是一个用以构建用户界面的 JavaScript
库,起源于 Facebook 的里边项目,用来架设 Instagram 的网站,于 2013 年 5
月开源。React
拥有比高的性能,代码逻辑非常简单,越来越多之人口就开关心同使用它们。

  以前没 ajax
技术之早晚,web 页面从服务端整体渲染出 html
输出及浏览器端进行渲染,同样的,用户之一个转移页面的操作为会见刷新整个页面来形成。直到来了
ajax 出现,实现页面局部刷新,带来的飞和分手为 web
开发者们惊叹不已。但随之而来的题材是,复杂的用户交互和表现得通过大气的
DOM 操作来好,这吃页面的性及支付的频率又冒出了初的瓶颈。

  时至今日,谈到前者性能优化,减少
DOM 元素、减少 reflow 和 repaint、编码过程被尽量减少 DOM
的查询等手法是豪门耳熟能详的。而页面任何UI的变更都是透过一体化刷新来形成的。幸运的是,React
通过友好实现之 DOM Diff
算法,计算出虚拟页面时版本与初本子里的差别,最小化重绘,避免不必要之
DOM 操作,解决了立即有限只公认的前端性能瓶颈,实现快捷 DOM 渲染。

  我们解,频繁的操作 DOM
所带来的性消耗是好充分之,而 React 之所以急匆匆,是以其不直操作
DOM,而是引进虚拟 DOM 的实现来缓解者问题

  对于页面的更新,React
通过祥和实现之 DOM Diff
算法来进行差别对比、差异更新,反映至页面上就是光重绘了翻新的片,从而提高渲染效率。

备注:以下性能阐述参考自尤雨溪。

  对于 React
的性质方面,想啰嗦几句:

    1. React
素没有说过 “React 比原生操作 DOM 快”。React
的基本思想模式是历次发生改就整个再渲染整个应用。如果没有 Virtual
DOM,简单来提就是直重置 innerHTML。

    2.
当比性能的时刻,要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场地。

    3.
不要天真地以为 Virtual DOM 就是赶快,diff 不是免费之,Virtual DOM
真正的价值向还未是性,而是其 

      1)
为函数式的 UI 编程方式打开了大门;

      2)
可以渲染到 DOM 以外的其他场景,如 backend、native。

组件化

  在业务支付被,遇到公共的沙盘部分,我们不得不将模板与确定之数格式耦合在一起来落实组件。而以
React 中,我们可以使用 JSX
语法来封装组件,将零件的组织、数据逻辑甚至样式且凑合合在一起,更加简明、明了、直观的概念组件。

  有矣组件化的贯彻,我们得以死直观的以一个复杂的页面分割成几何只独立组件,再以这些独立组件组合得一个扑朔迷离的页面。这样既减少了逻辑复杂度,又实现了代码的录用。

React 基础

模板

<!DOCTYPE html>

<html>

    <head>

        <script src=“js/react.js”></script>
    
    <script src=“js/react-dom.js”></script>
    
    <script src=“js/browser.min.js”></script>

    </head>

    <body>
        
<div id=“example”></div>

        <script type=“text/babel”>
    
    /*
    
    * ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,

    * 并插入指定的 DOM 节点。

    * 
    */
 
        ReactDOM.render(

            <h1>Hello, 博看文思!</h1>,
            document.getElementById(‘example’)

        );

        </script>

    </body>

</html>            

JSX

  上同一节的代码, HTML
语言直接写在 JavaScript 语言里,不加其余引号,这即是 JSX
的语法,它同意 HTML 与 JavaScript 的混写

JSX的好处:

1.用到JSX语法来封装组件有什么便宜:

  1)熟悉的代码

  2)更加语义化

  3)更加空虚且直观

2.几个注意点:

  1)render的章程中return的头号元素只能是一个;

  2)如果要定义样式的时候,不可知如此夺形容
    //
不要出现类似的不当,style=“opacity:{this.state.opacity};”

  3)使用 className
和 htmlFor 来替对应之class 和 for

提醒:关于组件化的话题,感兴趣之口舌可连续关心Vuejs、Web
components等对组件的写法。/**乘机越来越复杂的多端环境之起,组件标准化还存有更怪之想像空间,React的机件定义不是极端,也非肯定是标准,但会以组件化的征程上留下深刻de影响。**/

JSX 基本语法:

    var names = [‘Alice’, ‘Emily’, ‘Kate’];


    ReactDOM.render(

        <div>

        {
    
        names.map(function (name,key) {

            return <div key={key}>Hello, {name}!</div>

        })
        
}

        </div>,
 
                document.getElementById(‘example’)

    ); 

  上面代码体现了 JSX
的核心语法规则:遇到 HTML 标签(以 < 开头),就因此 HTML
规则解析;遇到代码块(以 { 开头),就就此 JavaScript 规则解析。

  JSX
允许直接以模板插入 JavaScript
变量。如果是变量是一个再三组,则会进展这数组的具备成员。

var arr = [

       <h1>Hello world!</h1>,
 
       <h2>React is awesome</h2>,

];

ReactDOM.render(

        <div>{arr}</div>,

        document.getElementById(‘example’)

);

组件

1.概念

  React
允许以代码封装成组件(component),然后如插入普通 HTML
标签一样,在网页遭到插入这个组件。React.createClass
方法就是用来转移一个零部件类 

2.代码示范

var HelloMessage = React.createClass({

    render: function() {

        return <h1>Hello {this.props.name}</h1>;

    }

});


ReactDOM.render(

    <HelloMessage name=“John” />,
 
    document.getElementById(‘example’)

);

 

var HelloMessage = React.createClass({

    render: function() {

        return <h1 className=“green”>Hello {this.props.name}</h1>;

    }

});


ReactDOM.render(

  <HelloMessage name=“John” />,

   document.getElementById(‘example’)

);

this.props**.children**

this.props
对象的特性和组件的属性一一对应,但是出一个两样,就是 this.props.children
属性。它意味着组件的所有子节点

var NotesList = React.createClass({
    render: function() {
        return (
        <ol>
        {
            /*
            * 因为this.props.children的返回值会根据子节点的数量返回undefined,object,array.
            * 所以react提供了一个react.Children的方法专门处理this.props.children
            * */
            React.Children.map(this.props.children, function (child) {
                return <li>{child}</li>;
            })
        }
        </ol>
        );
    }
});
ReactDOM.render(
<NotesList>
hello
world
</NotesList>,
        document.getElementById(“example”)
);

 PropTypes

组件的属性可以承受任意值,字符串、对象、函数等等都可。有时,我们用一致种机制,验证别人使用组件时,提供的参数是否符合要求。组件类的PropTypes属性,就是之所以来说明组件实例的性质是否符合要求。

var MyTitle = React.createClass({
    propTypes: {
        /*
        * 声明title属性是必须的,并且数据类型要为字符串,相当于是规范化的接口文档
        * */
        title: React.PropTypes.string.isRequired,
    },
    render: function() {
        return <h1> {this.props.title} </h1>;
    }
});
var data = “123”;
ReactDOM.render(
    <MyTitle title={data} />,
        document.getElementById(“example”)
);

 

   错误示范:

var data = 123;
ReactDOM.render(
  <MyTitle title={data} />,
  document.body
);

 

getDefaultProps

getDefaultProps
方法可以就此来装组件属性的默认值

var MyTitle = React.createClass({
        getDefaultProps: function () {
            return {
                title:”hello world”
            }
        },
        render: function() {
            return <h1> {this.props.title} </h1>;
        }
    });
//    var data = “123”;
    ReactDOM.render(
        <MyTitle />,
            document.getElementById(“example”)
    );

  获取真实的 DOM 节点

  组件并无是实事求是的 DOM
节点,而是有于内存之中的一样种多少结构,叫做虚拟 DOM (virtual
DOM)。只有当它们插入文档以后,才见面化实际的 DOM 。根据 React
的规划,所有的 DOM 变动,都先以虚拟 DOM
上发,然后再度以实际产生反的片段,反映在实事求是 DOM上,这种算法叫做 DOM
diff
,它好大幅度提高网页的特性表现。

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’)
);

  this.state

   组件免不了要和用户互动,React
的一模一样异常创新,就是拿零件看成是一个状态机,一开始发生一个开始状态,然后用户互动,导致状态变化,从而触发重新渲染
UI。React
把组件看成是一个状态机(State
Machines)。通过跟用户的相,实现不同状态,然后渲染
UI,让用户界面及多少保持一致。React
里,只需要创新组件的 state,然后因新的 state 重新渲染用户界面 

var LikeButton = React.createClass({
    getInitialState: function() {
        /*
        * 设置状态的初始值
        * */
        return {liked: false};
    },
    handleClick: function() {
        /*
        * 更改状态
        * */
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? ‘喜欢’ : ‘不喜欢’;
        return (
        <p onClick={this.handleClick}>
        你 {text} 他. 点击切换.
        </p>
        );
    }
});

ReactDOM.render(
<LikeButton />,
        document.getElementById(‘example’)
); 

  由于 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);

 

组件 API

 

组件的7个方法:

  设置状态:setState;

  替换状态:replaceState;

  设置属性setProps;

  替换属性replaceProps;

  强制更新:forceUpdate;

  获取DOM节点:getDOMNode;

  判断组件挂载状态:isMounted。

零件生命周期

初始化

getDefaultProps:设置默认性的价值

getInitialState:设置初始的状态

componentWillMount:(组件即将被装)

render(渲染)

componentDidMount:组件都于装载,只会在率先单零件为调用的时光出发

运行中

componentWillReceiveProps  
在组件将要接收及性的下,接收属性前

shouldComponentUpdate    在接收及新的
props 或者
state,将要渲染之前调用。该方式在初始化渲染之时光不会见调用

componentWillUpdate         render
触发之前,更新

render
             渲染

componentWillUnmount      在组件从 DOM
中移除的时候这叫调用

销毁

componentWillUnmount     在组件从 DOM
中移除的早晚被当即调用

 

var Hello = React.createClass({
    getInitialState: function () {
        return {
            opacity: 1.0
        };
    },

    componentDidMount: function () {
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1){
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            });
        }.bind(this), 100);
    },

    render: function () {
        return (
        <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
        </div>
        );
    }
});

ReactDOM.render(
<Hello name=“world”/>,
        document.body
);

 

因为 React
组件样式凡一个靶第一第一括号表示马上是
JavaScript 语法,第二重大括号表示样式对象

 

Ajax

  上面代码没有使用 jQuery 完成 Ajax
请求,这是为了有利于说明。React
本身并未任何借助,完全可以毫不jQuery,而下另外库。

var Input = React.createClass({
    getInitialState: function () {
        return {users:[]}
    },
    componentDidMount:function(){
        var _this = this;
        $.get(“http://localhost:8080/users?act=get”,function (data){
            console.log(data);
            _this.setState({
                users:data
            });
        });
    },
    render: function () {
        var users = this.state.users;
        console.log(users);
        return <table>
        {
            users.map(function (user,key){
            return <tr key={key}><td>{user.firstName}</td><td>{user.lastName}</td></tr>
        })
        }
        </table>
    }
});
ReactDOM.render(<Input/>,document.getElementById(“test”));

 

 

 

相关文章