React介绍(讲人话)

  3)尤其空虚且直观

    3.
毫无天真地以为 Virtual DOM 正是快,diff 不是免费的,Virtual DOM
真正的市场股票总值一贯都不是性质,而是它 

 

  替换属性replaceProps;

 

模板

    1. React
一向不曾说过 “React 比原生操作 DOM 快”。React
的主干思维方式是历次有转移就满门重新渲染整个应用。假诺没有 Virtual
DOM,简单的说正是一向重置 innerHTML。

  JSX
允许间接在模板插入 JavaScript
变量。要是那些变量是三个数组,则会进展那几个数组的富有成员。

getDefaultProps
方法能够用来安装组件属性的暗许值

组件

 

this.props**.children**

shouldComponentUpdate    在吸收接纳到新的
props 或许state,将要渲染在此以前调用。该办法在发轫化渲染的时候不会调用

this.props
对象的属性与组件的属性一一对应,可是有二个见仁见智,便是 this.props.children
属性。它意味着组件的全部子节点

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

 

初始化

    2.
在比较品质的时候,要分清楚起先渲染、小量数据更新、大量数量更新那么些分歧的场合。

  由于 this.props 和 this.state
都用来描述组件的特色,也许会产生模糊。三个差不离的界别方法是,this.props
表示那个一旦定义,就不再改变的表征,而 this.state
是会趁机用户互动而爆发变化的特征。

  上面代码没有动用 jQuery 完毕 Ajax
请求,那是为了有利于表明。React
自己没有其余借助,完全能够毫不jQuery,而利用其余库。

 

component威尔Mount:(组件即将棉被服装载)

备考:以下质量演说参考自尤雨溪。

1.概念

  React
是二个用来创设用户界面包车型的士 JavaScript 库,首要用来构建 UI,而不是两个 MVC
框架,但能够动用 React 作为 MVC 架构的 View
层轻易的在已有品种中选拔,它是贰个用以营造用户界面包车型地铁 JavaScript
库,起点于 Facebook 的其中项目,用来架设 推文(Tweet)(推特(Twitter)) 的网站,于 二〇一三 年 三月开源。React
拥有较高的品质,代码逻辑万分简单,越多的人已发轫关怀和平运动用它。

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

零件生命周期

 

因为 React
组件样式
是二个对象第贰重点括号表示那是
JavaScript 语法,第叁根本括号表示样式对象

 

运行中

      1)
为函数式的 UI 编制程序格局打开了大门;

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

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

2.多少个注意点:

  大家清楚,频仍的操作 DOM
所推动的属性消耗是非常大的,而 React 之所以快,是因为它不直接操作
DOM,而是引进虚拟 DOM 的达成来化解那些标题

  上一节的代码, HTML
语言直接写在 JavaScript 语言之中,不加任何引号,那便是 JSX
的语法,它同意 HTML 与 JavaScript 的混写

零件的天性还不错任意值,字符串、对象、函数等等都得以。有时,大家要求一种体制,验证外人采用组件时,提供的参数是还是不是符合供给。组件类的PropTypes属性,便是用来申明组件实例的习性是不是符合须求。

getDefaultProps:设置暗许性的值

  this.state

getInitialState:设置开始的意况

  替换状态:replaceState;

component威尔Unmount     在组件从 DOM
中移除的时候被立刻调用

   错误示范:

  有了组件化的贯彻,大家得以很直观的将二个复杂的页面分割成多少个独立组件,再将那个独立组件组合形成二个错综复杂的页面。这样既减弱了逻辑复杂度,又达成了代码的重用。

销毁

 PropTypes

JSX的好处:

componentDidMount:组件已经棉被服装载,只会在第二个零部件被调用的时候出发

  设置意况:setState;

JSX 基本语法:

 

var HelloMessage = React.createClass({

    render: function() {

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

    }

});


ReactDOM.render(

  <HelloMessage name=“John” />,

   document.getElementById(‘example’)

);

  2)尤其语义化

      2)
能够渲染到 DOM 以外的别的场景,如 backend、native。

var HelloMessage = React.createClass({

    render: function() {

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

    }

});


ReactDOM.render(

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

);

1.施用JSX语法来封装组件有啥样利益:

render
             渲染

React 基础

   组件免不了要与用户互动,React
的一大立异,就是将零件看成是贰个状态机,一开端有三个始发状态,然后用户互动,导致情状变化,从而触发重新渲染
UI。React
把组件看成是二个状态机(State
Machines)。通过与用户的相互,完毕不一样景况,然后渲染
UI,让用户界面和数目保持一致。React
里,只需创新组件的 state,然后依据新的 state 重新渲染用户界面 

component威尔ReceiveProps  
在组件将要接收到属性的时候,接收属性前

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

  2)假若要定义样式的时候,不可能如此去写
    //
不要出现类似的错误,style=“opacity:{this.state.opacity};”

  在工作支出中,碰着公共的沙盘部分,大家不得不将模板和明确的数量格式耦合在联合来贯彻组件。而在
React 中,咱们得以运用 JSX
语法来封装组件,将零件的结构、数据逻辑甚至样式都汇集在联合署名,尤其简明、明了、直观的定义组件。

var arr = [

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

];

ReactDOM.render(

        <div>{arr}</div>,

        document.getElementById(‘example’)

);

组件化

React 背景知识

 

Ajax

组件 API

  1)纯熟的代码

  时至明天,谈到前者品质优化,收缩DOM 元素、收缩 reflow 和 repaint、编码进程中尽量缩小 DOM
的查询等招数是豪门耳熟能详的。而页面任何UI的变更都以通过全部刷新来达成的。幸运的是,React
通过协调完成的 DOM Diff
算法,总计出虚拟页面当前版本和新本子之间的差距,最小化重绘,幸免不供给的
DOM 操作,化解了那三个公认的前端质量瓶颈,达成火速 DOM 渲染。

getDefaultProps

 

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

component威尔Unmount      在组件从 DOM
中移除的时候即刻被调用

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

JSX

component威尔Update         render
触发在此之前,更新

render(渲染)

  组件并不是真正的 DOM
节点,而是存在于内部存款和储蓄器之中的一种数据结构,叫做虚拟 DOM (virtual
DOM)。唯有当它插入文书档案今后,才会化为实际的 DOM 。依照 React
的安排性,全数的 DOM 变动,都先在编造 DOM
上产生,然后再将实际发生变更的一对,反映在真正 DOM上,那种算法叫做 DOM
diff

,它可以非常的大增强网页的性质表现。

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


    ReactDOM.render(

        <div>

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

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

        })
        
}

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

    ); 

  1)render的艺术中return的世界级成分只好是八个;

<!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>            

  强制更新:forceUpdate;

  设置属性setProps;

  上边代码显示了 JSX
的骨干语法规则:碰着 HTML 标签(以 < 开端),就用 HTML
规则解析;碰到代码块(以 { 初叶),就用 JavaScript 规则解析。

2.代码演示

  获取DOM节点:getDOMNode;

  React
允许将代码封装成组件(component),然后像插入普通 HTML
标签一样,在网页中插入那一个组件。React.createClass
方法就用于转移1个组件类 

组件的7个方法:

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

 

提示:关于组件化的话题,感兴趣的话能够继续关心Vuejs、Web
components等对组件的写法。/**趁着愈来愈复杂的多端环境的面世,组件标准化还富有更大的想象空间,React的零部件定义不是终点,也不自然是正式,但会在组件化的征程上预留深切de影响。**/

  获取真实的 DOM 节点

  以前从未有过 ajax
技术的时候,web 页面从服务端全部渲染出 html
输出到浏览器端进行渲染,同样的,用户的三个改成页面包车型客车操作也会刷新整个页面来成功。直到有了
ajax 出现,达成页面局地刷新,带来的不慢和分手让 web
开发者们赞叹不己。但随之而来的题材是,复杂的用户交互及表现供给通过大气的
DOM 操作来形成,那让页面包车型地铁性格以及支付的频率又出现了新的瓶颈。

  判断组件挂载状态:isMounted。

 

  对于页面包车型大巴更新,React
通过友好达成的 DOM Diff
算法来开始展览差异相比较、差别更新,反映到页面上正是只重绘了创新的有的,从而进步渲染效用。

相关文章