关于react.js:React17-系统精讲-结合TS打造旅游电商平台

54次阅读

共计 4394 个字符，预计需要花费 11 分钟才能阅读完成。

引入原则：

body 区域

<div id=’example’></div>
<script type=’text/bable’>
//**our codes goes here!
</script>

实际上线用 babel 进行转换

bable src –out-dir build

ReactDOM.render()

示例：

ReactDOM.render(
<h1>hello world!</h1>,
document.getElementById(‘example’);
)

JSX 语法

var names =[‘Alice’,’Emily’,’Kate’];
ReactDOM.render(
<div>
{

 names.map(function(name){return <div>Hello,{name}!</div>
})

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

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

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

组件

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

var HelloMessage = React.creatClass({

render:function(){return <h1>Hello {this.props.name}</h1>;
}

});
ReactDOM.render(
<HelloMessage name=’john’ />,
document.getElementById(‘example’)
);

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

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

class 属性需要写成 className

this.props.children

this.props.children 示意组件所有的子节点

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

 return(
   <ol>
   {React.Children.map(this.props.children,function(child){return <li>{child}</li>
        })
    }
    </ol>
  );
}

});
ReactDOM.render(
<NoteList>

<span>hello</span>
<span>World</span>

</NoteList>,
document.body
);

使用 React.Children.map 来遍历子节点，不必担心 this.props.children 的数据类型

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 可能用来设置组件属性的默认值

getDefaultProps:function(){
return {

  title: 'Hello World'
  };

}

获取实在的 DOM 节点

有时需要从组件中获取实在的 DOM 节点，需要用到 ref 属性。

var MyComponet = React.CreatClass({
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(
<MyComponet />,
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(<p onClicked={this.handleClick}>
          You {text} this. Click to toggle.
       </p>
    );
}

});
ReactDom.render(
<LikeButton />,
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 (
       <div>
          <input type='text' value = {value}  
          onChange = {this.handleChange} />
          <p>{value}</p>
        </div>
    );
}

});
ReactDOM.render(<Input />,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 (<div style = {{opacity:this.state.opacity}}>
          Hello {{this.props.name}
      </div>
    );
}

});
ReactDOM.render(
<Hello name=’world’ />,
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 (
       <div>
          {this.state.username}'s last gist is
          <a href={this.state.lastGistUrl}>here</a>.
       </div>
    );
}

});
ReactDOM.render(

<UserGist source = 'http:xx.xxx.com' />,
document.body

);

把其余路径获取的对象传入组件

ReactDOM.render(

<RepoList promise = {$.getJSON('http://xx.xxx.com)} />,
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 <span>Loading…</span>}
    else if(this.state.error !== null){return <span>Error: {this.state.error.message}</span>;
    }
    else{
       var repos = this.state.data.items;
       var reposList = repos.map(function(repo){
           return (
              <li>
                 <a href={repo.html}>{repo.name}</a>
              </li>
            );
        });
        return (
            <main>
               <h1>Most Popular JavaScript Projects in Github</h1>
               <ol>
                  {repoList}
               </ol>
            </main>
        );
    }
}

});

正文完