命令式编程: 要关注做什么和怎么做(流程), 类似于问答题
var arr = [1, 3, 5, 7] // 需求: 得到一个新的数组, 数组中每个元素都比arr中对应的元素大10: [11, 13, 15, 17] // 命令式编程 var arr2 = [] for(var i =0;i<arr.length;i++) { arr2.push(arr[i]+10) } console.log(arr2) // 声明式编程 var arr3 = arr.map(function(item){ return item +10 }) // 声明式编程是建立命令式编程的基础上 React的JSXJSX定义: JavaScript XML,react定义的一种类似于XML的JS扩展语法:XML+JS,用来创建react虚拟DOM(元素)对象.
注意:
1.它不是字符串, 也不是HTML/XML标签
2.它最终产生的就是一个JS对象
JSX编码:
基本语法规则:
遇到 < 开头的代码, 以标签的语法解析:html同名标签转换为html同名元素,其它标签需要特别解析
遇到以 { 开头的代码,以JS的语法解析:标签中的js代码必须用{}包含
js中直接可以套标签, 但标签要套js需要放在 { } 中
在解析显示js数组时,会自动遍历显示
把数据的数组转换为标签的数组
var liArr = dataArr.map(function(item, index){ return <li key={index}>{item}</li> })babel.js的作用
浏览器的js引擎是不能直接解析JSX语法代码的,需要babel转译为纯JS的代码才能运行
只要用了JSX,都要加上type="text/babel",声明需要babel来处理
注意:
标签必须有结束
标签的class属性必须改为className属性
标签的style属性值必须为: {{color:'red', width:12}}
React的其它操作 双向绑定React是一个单向数据流
可以自定义双向数据流组件(受控组件)，需要通过onChange监听手动实现
<script type="text/babel"> class Control extends React.Component{ constructor(props){ super(props) //初始化状态 this.state = { msg:'ATGUIGU' } this.handleChange = this.handleChange.bind(this) } handleChange(event){ //得到最新的state的值 const msg=event.target.value; // console.log(event.target) // console.log(event.target.value) //更新状态 this.setState({msg}) } render(){ const {msg} = this.state return( <div> <input type="text" value={msg} onChange={this.handleChange}/> <p>{msg}</p> </div> ) } } ReactDOM.render(<Control/>,document.getElementById('example')) </script> React发送ajax请求React没有ajax模块,所以只能集成其它的js库(如jQuery/axios/fetch), 发送ajax请求
axios
封装XmlHttpRequest对象的ajax
promise
可以用在浏览器端和服务器
fetch
不再使用XmlHttpRequest对象提交ajax请求
fetch就是用来提交ajax请求的函数,只是新的浏览才内置了fetch
为了兼容低版本的浏览器,可以引入fetch.js
在哪个方法去发送ajax请求:
只显示一次(请求一次): componentDidMount()
显示多次(请求多次): componentWillReceiveProps()
//做一个跳转页面 <script src=""></script> <script src=""></script> <script src=""></script> <script src="http://cdn.bootcss.com/axios/0.16.2/axios.js"></script> <script type="text/babel"> class UserLastGist extends React.Component { constructor (props) { super(props) this.state = { url: null } } componentDidMount () { // 发送ajax请求 const url = `https://api.github.com/users/${this.props.username}/gists` axios.get(url) .then(response => { console.log(response) // 读取响应数据 //0索引位代表最后更新的网页内容 const url = response.data[0].html_url // 更新状态 this.setState({url}) }) .catch(function (error) { console.log('----', error); }) } render () { const {url} = this.state if(!url) { return <h2>loading...</h2> } else { return <p>{this.props.username}'s last gist is <a href=http://www.likecs.com/{url}>here</a> </p> } } } UserLastGist.propTypes = { username: React.PropTypes.string.isRequired } ReactDOM.render(<UserLastGist username="octocat"/>, document.getElementById('example')) </script> RESTful