react学习笔记

1.import ReactDOM from 'react-dom'//ReactDOM.render(渲染的内容(可以自定义的变量或者组件),根元素在public下index.html)

2.每个组件必须引入import react from 'react'，否则报错，因为不符合jsx语法

3、传参 

（1）无状态

父组件

    import Home from './Home'

      <Home name1="name"></Home>

子组件

function Home(props){

    return(

    <h1>这是home {props.name1}</h1>

    )

}

4、import React,{Fragnent} from 'react//Fragnent只包裹不显示

5、给类加样式 className=“类名”

6、引入图片，把图片放在public（public为根目录）下（<img src='/图片名称'>）

7、jsx  const ele = <h1 id="">这是好</h1>

          const ele = React.createElement(

          'h1',//标签

          {id:"zzz"},//标签设置id

          "这是h1"//标签内容

       )

8、渲染变量需要模板 一个方括号{}

9、map循环数组 在一行写 不需要return，换行写需要写return

10、有状态传参

class App extends React.Component{

  constructor(){

    super()

    this.state = {

      count:1

    }

    //this 把add重新修改了this指向bind() 

    this.add = this.add.bind(this)

  }

  add(){

    console.log(this)

    //setState用来修改state 异步获取数据会render渲染数据变化；同步页面获取不到数据变化值，不触发render

    this.setState({

      count:this.state.count+=1

    }) 

  }

  render(){ 

   return(

    <div>

    这是有状态组件--class声明

//以下三种改变this，指向App

    <button onClick={this.add}>++</button>

    <button onClick={() => this.add()}>++</button>

    <button onClick={this.add.bind()}>++</button>

    {this.state.count}

    </div>

   )

  }

}

export default App

11、this.props 只读不能修改

12、rcc快速创建react结构

13、在index.js引入import { BrowserRouter as Router} from "react-router-dom"，

ReactDOM.render(

    <Router>

      <App></App>

    </Router>

,document.getElementById('root'))

 

在app.js配置路由，并路由跳转

import {Route,Link} from "react-router-dom"

          {/* Link首字母大写 */}
          <li><Link to="/home">home</Link></li>

        <Route path="/home" component={Home}></Route>

14、

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

生命周期的方法有：

• componentWillMount 在渲染前调用,在客户端也在服务端。

• componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

• componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

• shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
  可以在你确认不需要更新组件时使用。

• componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

• componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

• componentWillUnmount在组件从 DOM 中移除之前立刻被调用