React17 系统精讲 结合TS打造旅游电商平台

引入准绳:





body区域


实践上线用babel停止转换

bable src --out-dir build

ReactDOM.render()

示例:

ReactDOM.render(

hello world!

,
document.getElementById('example');
)

JSX语法

var names =['Alice','Emily','Kate'];
ReactDOM.render(


{

 names.map(function(name){
    return 
Hello,{name}!
})

}

,
document.getElementById('example')
);

JSX允许在模板中直接插入JavaScript变量

var arr = [

Hello world!

,

React is awesome


];
ReactDOM.render(
{arr}
,
document.getElementById('example')
);

组件

React.createClass用于生成一个组件类

var HelloMessage = React.creatClass({

render:function(){
return 

Hello {this.props.name}

; }

});
ReactDOM.render(
,
document.getElementById('example')
);

组件的第一个字母必需大写

组件只能包含一个顶层标签

class属性需求写成className

this.props.children

this.props.children 表示组件一切的子节点

var NoteList = React.createClass({
render:function(){

 return(
   
    { React.Children.map(this.props.children,function(child){ return
  1. {child}
  2. }) }
); }

});
ReactDOM.render(

hello
World

,
document.body
);

运用React.Children.map来遍历子节点,不用担忧this.props.children的数据类型

PropTypes

考证实例的属性能否契合请求

var MyTitle = react.createClass({
propTypes:{

 title:React.PropTypes.string.isRequired,
 },

render:function(){

  return 

{this.props.title}

}

});
var data = 123;
ReactDOM.render(
,
document.body
);

getDefaultProps能够用来设置组件属性的默许值

getDefaultProps:function(){
return {

  title: 'Hello World'
  };

}

获取真实的DOM节点

有时需求从组件中获取真实的DOM节点,需求用到ref属性。

var MyComponet = React.CreatClass({
handleClick:function(){

 this.refs.myTextInput.focus();

},
render:function(){

 return (
   
); }

});
ReactDOM.render(
,
document.getElementById('example')
);

指定click事情回调函数,确保DOM真实渲染后触发,除此还支持KeyDown等事情

this.state

组件视为状态机,用户互动,状态变化,重新渲染UI。

var LikeButton = React.CreatClass({
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(
       

You {text} this. Click to toggle.

); }

});
ReactDom.render(
,
document.body
);

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 (
       

{value}

); }

});
ReactDOM.render(,document.body);

这里获得输入框的值没有运用this.props.value,选用了event.target.value。

组件的生命周期

Mounting: 已插入真实DOM

Updating: 正在被重新渲染

Unmounting:已移除真实DOM

var Hello = React.createClass({

getInitialState:function()
    return {
       opacity:1.0
    }
},

compontentDidMount: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 (
      
Hello {{this.props.name}
); }

});
ReactDOM.render(
,
document.body
);

bind(this)——原生JS写法。

Ajax

运用compontentDidMount办法设置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 (
       
{this.state.username}'s last gist is here.
); }

});
ReactDOM.render(

,
document.body

);

把其他途径获取的对象传入组件

ReactDOM.render(

,
document.body

);
var RepoList = React.createClass({

getInitialState: function(){
    return { loading:true, error : null , data : null}
},

componentDidMount(){
    this.props.promise.then(
        value => this.setState({loading:false,data:value}),
        error => this.setState({loading:false,error:error}));
},

render:function(){
    if(this.state.loading){
       return Loading…
    }
    else if(this.state.error !== null){
       return Error: {this.state.error.message};
    }
    else{
       var repos = this.state.data.items;
       var reposList = repos.map(function(repo){
           return (
              
  • {repo.name}
  • ); }); return (

    Most Popular JavaScript Projects in Github

      {repoList}
    ); } }

    });

    你可能感兴趣的