之前一直是写的jsp页面,应为项目需要,最近开始学习react,有问题请多指教
声明式
React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。
以声明式编写UI,可以让你的代码更加可靠,且方便调试。
组件化
创建好拥有各自状态的组件,再由组件构成更加复杂的界面。
无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。
一次学习,随处编写
无论你现在正在使用什么技术栈,你都可以随时引入 React 开发新特性。
React 也可以用作开发原生应用的框架 React Native.
组件
react组件使用一个名为render()的方法,接收数据作为输入,输出页面中对应展示的内容。
class HelloMessage extends React.Component { render() { return ( <div> Hello {this.props.name} </div> ); } } ReactDOM.render( <HelloMessage name="Taylor" />, mountNode );
上面这个示例中类似XML的写法被称为JSX. 输入的数据通过 this.props
传入 render()
方法。
react-dom react是虚拟dom(文档对象模型),reactDOM的作用就是将虚拟dom渲染成实际DOM,reactDOM其它作用后面在看,自己暂时没看。
this.props
访问传入数据
this.state 访问内部状态,通过this.state获取的数据改变后,组件会调用render()方法重新渲染页面
下面这个官方demo中的应用
使用props和state 创建一个ToDo应用
class TodoApp extends React.Component { constructor(props) { super(props); this.state = { items: [], text: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } render() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.handleChange} value={this.state.text} /> <button> Add #{this.state.items.length + 1} </button> </form> </div> ); } handleChange(e) { this.setState({ text: e.target.value }); } handleSubmit(e) { e.preventDefault(); if (!this.state.text.length) { return; } const newItem = { text: this.state.text, id: Date.now() }; this.setState(prevState => ({ items: prevState.items.concat(newItem), text: '' })); } } class TodoList extends React.Component { render() { return ( <ul> {this.props.items.map(item => ( <li key={item.id}>{item.text}</li> ))} </ul> ); } } ReactDOM.render(<TodoApp />, mountNode);
在组件中使用第三方库
直接引入 import XXX from xxxx
根据官方文档中的入门教程开发一个井字游戏