React---第一弹

第一弹

什么是 react?

react 是 Facebook 出的一款针对 View 视图层的 library(库),使用单向数据流的方式显示数据

在最新的 react 中官方建议使用 function 定义组件

引入 js 顺序

<script src="./lib/babel.min.js"></script>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>

定义组件的方法有哪些？

• 函数定义组件

  function Btn() {
    return (
      <div>
        <h5>我是一个按钮组件</h5>
        <button>点我</button>
      </div>
    );
  }
  

• 通过 class 类定义组件

class Counter extends React.Component{
 constructor(){
   super();
   this.state={
     count:2
   }
 }
 render(){
   return(
     <button
         onClick={ ()=>{
           this.setState({
             count:this.state.count + 1
           })
           }
         }
       >  技术 ({this.state.count})
     </button>
   )
 }
}

ReactDOM.render(<Counter />,document.querySelector("#app"));)

注意点

1.  类定义组件时 先 调用super方法
2.  使用this.state可以定义一个局部状态
3.  使用this.setState方法来改变当前的state中的函数

jsx 语法

jsx 语法规定：

• 注意：每一个组件必须有一个返回值，为了组件在页面展示内容。
• 注意：每一个组件只能有一个根节点。
• 能够使用 js 方法和插件

ReactDOM.render()

有两个参数，
第一个参数是显示的内容(注意：组件的顺序)
第二个参数是挂载点。

react 中的 this 指向问题

首先，为事件处理函数绑定this指向

`this.keyUpHandle = this.keyUpHandle.bind(this);`

其次，在方法调用的时候绑定

`this.nickNameKeyUpHandle.bind(this)`

最后，箭头函数


`e => this.skillKeyUpHandle(e)`

fetch - 获取数据

fetch
一共两个参数；
第一个参数是 url;
第二个参数是 method

fetch("http://localhost:3000/movies", {
            method: "GET"
          }).then().catch()