|
原文地址：北云软件-初识React
专注于UI
在MVC分层设计模式中，react常被拿来实现视图层(V)。
React不依赖于技术栈的其他部分，因此可以方便的在现有项目中尝试用它来实现一个小特性。
虚拟DOM
React从DOM中抽象出来，给出一种更简洁的编程模型，且性能表现更好。能够通过NodeJS实现服务端渲染，通过React Native开发原生app。
数据流
React实现单向、响应式数据流，减少boilerplate且比传统数据绑定更容易理解。
简洁的组件
React的组件都实现了一个render()方法，它接收输入的数据并返回要显示的内容。这个例子中我们使用JSX(类XML语法)来编写代码。render()方法通过this.props属性来访问输入的数据。
React并不强制要求开发者使用JSX。在“编译的JS”中可以查看JSX生成的原始Javascript代码。
//JSXcode
varHelloMessage=React.createClass({
render:function(){
return<div>Hello{this.props.name}</div>;
}
});
React.render(<HelloMessagename="John"/>,mountNode);
//compiledjavascriptcode
varHelloMessage=React.createClass({displayName:"HelloMessage",render:function(){
returnReact.createElement("div",null,"Hello",this.props.name);
}
});
React.render(React.createElement(HelloMessage,{name:"John"}),mountNode); |
带状态的组件
除了可以通过this.props访问输入数据之外，组件还可以通过this.state来维持他的内部状态数据。当一个组件的状态数据改变时，组件将重新调用render()方法来重绘。
//JSXcode
varTimer=React.createClass({
getInitialState:function(){
return{secondsElapsed:0};
},tick:function(){
this.setState({secondsElapsed:this.state.secondsElapsed+1});
},componentDidMount:function(){
this.interval=setInterval(this.tick,1000);
},componentWillUnmount:function(){
clearInterval(this.interval);
},render:function(){
return(
<div>SecondsElapsed:{this.state.secondsElapsed}</div>
);
}
});
React.render(<Timer/>,mountNode);
//compiledjavascriptcode
varTimer=React.createClass({displayName:"Timer",getInitialState:function(){
return{secondsElapsed:0};
},render:function(){
return(
React.createElement("div","SecondsElapsed:",this.state.secondsElapsed)
);
}
});
React.render(React.createElement(Timer,null),mountNode);
|
React应用
结合使用属性(props)和状态(state)，可以构建一个基础的代办事项应用。这个例子中使用状态来跟踪事项列表和用户输入的新事项名称，即使事件处理程序看起来是内联的，他们仍将会通过代理被收集和实现。
//JSXcode
varTodoList=React.createClass({
render:function(){
varcreateItem=function(itemText,index){
return<likey={index+itemText}>{itemText}</li>;
};
return<ul>{this.props.items.map(createItem)}</ul>;
}
});
varTodoApp=React.createClass({
getInitialState:function(){
return{items:[],text:''};
},onChange:function(e){
this.setState({text:e.target.value});
},handleSubmit:function(e){
e.preventDefault();
varnextItems=this.state.items.concat([this.state.text]);
varnextText='';
this.setState({items:nextItems,text:nextText});
},render:function(){
return(
<div>
<h3>TODO</h3>
<TodoListitems={this.state.items}/>
<formonSubmit={this.handleSubmit}>
<inputonChange={this.onChange}value={this.state.text}/>
<button>{'Add#'+(this.state.items.length+1)}</button>
</form>
</div>
);
}
});
React.render(<TodoApp/>,mountNode);
//compiledjavascriptcode
varTodoList=React.createClass({displayName:"TodoList",render:function(){
varcreateItem=function(itemText,index){
returnReact.createElement("li",{key:index+itemText},itemText);
};
returnReact.createElement("ul",this.props.items.map(createItem));
}
});
varTodoApp=React.createClass({displayName:"TodoApp",getInitialState:function(){
return{items:[],React.createElement("h3","TODO"),React.createElement(TodoList,{items:this.state.items}),React.createElement("form",{onSubmit:this.handleSubmit},React.createElement("input",{onChange:this.onChange,value:this.state.text}),React.createElement("button",'Add#'+(this.state.items.length+1))
)
)
);
}
});
React.render(React.createElement(TodoApp,mountNode);
|
组件可以使用第三方插件
React非常灵活，通过钩子允许与其他的库和框架对接。这个例子使用外部的Markdown库来实时转化文本域中的内容。
//JSXcode
varMarkdownEditor=React.createClass({
getInitialState:function(){
return{value:'Typesome*markdown*here!'};
},handleChange:function(){
this.setState({value:React.findDOMNode(this.refs.textarea).value});
},render:function(){
return(
<divclassName="MarkdownEditor">
<h3>Input</h3>
<textareaonChange={this.handleChange}ref="textarea"defaultValue={this.state.value}/>
<h3>Output</h3>
<divclassName="content"dangerouslySetInnerHTML={{
__html:marked(this.state.value,{sanitize:true})
}}/>
</div>
);
}
});
React.render(<MarkdownEditor/>,mountNode);
//compiledjavascriptcode
varMarkdownEditor=React.createClass({displayName:"MarkdownEditor",getInitialState:function(){
return{value:'Typesome*markdown*here!'};
},{className:"MarkdownEditor"},"Input"),React.createElement("textarea",{
onChange:this.handleChange,ref:"textarea",defaultValue:this.state.value
}),"Output"),React.createElement("div",{
className:"content",dangerouslySetInnerHTML:{
__html:marked(this.state.value,{sanitize:true})
}
})
)
);
}
});
React.render(React.createElement(MarkdownEditor,mountNode);
|
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
