React入门实例

React入门实例Tags:React
  • React介绍
  • JSX语法
  • 组件
  • props
  • state
## React介绍React 一个由Facebook开源的构建用户界面的Javascript库,相当于MVC中的View层
React特点:
  • 声明式设计 −React采用声明范式,可以轻松描述应用。
  • 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
  • 灵活 −React可以与已知的库或框架很好地配合。
  • JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  • 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  • 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
  • React网页模板:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <!-- react核心库 --> <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <!-- react 提供与DOM相关功能 --> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <!-- 将ES6预发转换为ES5语法,将JSX语法转换为Javascript语法,较好性能,一般在服务端完成此操作 --> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> </head> <body> <div id="example"></div> <!-- 注意点:type属性值要设置为text/babel --> <script type="text/babel"> </script> </body> </html>## JSX语法JSX是Javascript的拓展语法糖,在React中替代JavascriptJSX特点:
  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
  • 类型安全,在编译过程中就能发现错误。
  • 使用 JSX编写模板更加简单快速。
  • ReactDOM.render(( <div> <p> ReactDOM.render 是React的基本方法,用于将JSX模板转换为Html语言,并插入到指定节点中 </p> <p> ReactDOM.render 有三个参数: <ul> <li> 第一个参数:要渲染的的ReactElement,只能有一个根节点 </li> <li> 第二个参数:容器,组件渲染结果在DOM中要插入的未知 </li> <li> 第三个参数:回调函数,可选。传入该值时,会在组件渲染完或更新完成后调用 </li> </ul> </p> </div>),document.getElementById('example'));JSX表达式 var a=1; ReactDOM.render(( <p> {a==1?'true':'false'} </p> ),document.getElementById('example'));样式 var style1={ lineHeight:'32px', fontWeight:'bolder', border:'1px solid red' }; ReactDOM.render(( <div> <p className='normal'> 选择器样式:注意:此处使用className的值来指定P标签的class样式,原因 class是React中的关键字 </p> <p style={style1}> 对象样式:通过一个对象来实现,该对象的内容即CSS对象的属性和值 注意: 1.单个单词的 CSS 属性(比如 padding, margin, color)保持不变。 2.带有短横线的多个单词的 CSS 属性(比如 background-color, font-family, border-radius)变成去掉横线,并且第二个单词的首字母大写的驼峰规则命名的单词,即backgroundColor,fontFamily,boredrRadius </p> <p style={{ lineHeight:'32px',fontWeight:'bolder',border:'1px solid red' }}> 内联样式 </p> </div> ),document.getElementById('example'));数组var arr = [ <h1> JSX 允许在模板中插入数组,数组会自动展开所有成员 </h1>, <h2> 我是数组的一个内容项 </h2> ]; ReactDOM.render(( <div> {arr} </div> ), document.getElementById('example'));## 组件React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件注意点:
  • React中创建的组件类以大写字母开头,驼峰命名法,
  • 在React中使用React.createClass方法创建一个组件类
  • 每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值:null、false、组件模板
  • 组件类只能包含一个顶层标签
  • var HelloMessage = React.createClass({ render: function () { return <h1>Hello World!</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') );HTML标签与React组件
    React即可以渲染HTML标签,也可以渲染React组件。JSX语法约定了分别使用首字母大小写,来区分本地组的类和HTML标签:
  • HTML标签,标签名以小写字母开头
  • React组件,标签名以大写字母开头
  • var myDivElement = <div className="foo" >渲染普通html标签</div>; React.render(myDivElement, document.getElementById('example')); var MyComponent = React.createClass({ render:function() { return ( <div> 渲染React组件,React.createClass创建了一个组件 </div> ); } }); ReactDOM.render(<MyComponent />, document.getElementById('example'));复合组件var WebSite = React.createClass({ render: function() { return ( <div> <Name name={this.props.name} /> <Link site={this.props.site} /> </div> ); } }); var Name = React.createClass({ render: function() { return ( <h1>{this.props.name}</h1> ); } }); var Link = React.createClass({ render: function() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }); ReactDOM.render( <WebSite name="菜鸟教程" site=" http://www.runoob.com" />, document.getElementById('example') );## propsprops 负责给组件传值,给组件设置的属性,都会存储在this.props对象中,this.props对象的属性跟组件的属性是一一对应var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="Runoob" />, document.getElementById('example')...this.props
    能够将父组件所有的属性都复制给子组件var Link = React.createClass({ render: function () { return <a {...this.props}>{this.props.name}</a> } }); ReactDOM.render( <Link href="http://www.baidu.com" name="百度搜索" />, document.getElementById("example") ); this.props.children
    这是一个例外,不跟组件属性对应,标识组件的所有子节点
    在组件内容不确定是使用,在子组件中需要使用React.Children.map方法遍历所有子节点项var ListComponent = React.createClass({ render: function () { return ( <ul> { React.Children.map(this.props.children, function (child) { // child是遍历得到的父组件的子节点 return <li>{child}</li> }) } </ul> ); } }); ReactDOM.render( ( <ListComponent> <h1>子节点1</h1> <p>子节点2</p> <div>子节点3</div> </ListComponent> ), document.getElementById("example") ); 组件默认属性var HelloMessage = React.createClass({ getDefaultProps: function () { return { name: 'React' }; }, render: function () { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); props 验证
    用于验证组件实例的属性是否符合要求 var title = "props验证测试"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function () { return <h1> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle title={title} />, document.getElementById('example') );## stateReact 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
    当state发生变化时,会调用组件内部的render方法var CheckButton = React.createClass({ // 定义初识状态 getInitialState: function () { return { // 在这个对象中设置的属性,将会存储在state中 // 默认状态,未选中 isCheck: false } }, // 定义事件绑定的方法 handleChange: function () { // 修改状态值,通过this.state读取设置的状态值 this.setState({ isCheck: !this.state.isCheck }); }, render: function () { // 根据状态值,设置显示的文字 // 在JSX语法中,不能直接使用if,使用三目运算符 var text = this.state.isCheck ? "已选中" : "未选中"; return ( <div> <input type="checkbox" onChange={this.handleChange} /> {text} </div> ); } }); ReactDOM.render( <CheckButton />, document.getElementById("example") ); var Input = React.createClass({ getInitialState: function () { return { value: "请输入" }; }, handleChange: function (event) { // 通过event.target.value读取用户输入的值 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.getElementById("example") );

    相关内容推荐