react学习笔记

安装一下

直接按照官方文档就可以

npx create-react-app my-app
cd my-app
npm start

开发前，配置vscode，提升开发效率

vscode 安装   **ES7 React/Redux/GraphQL/React-Native snippets

**
在vscode 的插件搜react 出来的第一个就是
安装后 配置jsx语法 里面的html标签提示
打开设置ctrl+, 然后在右上角有一个设置.json文件

然后添加下面的代码
  "emmet.includeLanguages":{
    "wxml": "html",
    "javascript":"javascriptreact"
  },
  "emmet.syntaxProfiles":{
    "javascript":"jsx",
    "javascript":"html"
  },
 如果以前有配置不要重复

这样在jsx语法里面就有html标签的提示啦(用着比较舒服)

绑定事件

绑定事件demo

export class Search extends Component {
  state = {
    text:"真帅", 
  }
  onSubmit(e){
    e.preventDefault();
    console.log(this.state.text)
  }
  render() {
    return (
      <button onSubmit={this.onSubmit.bind(this)}><button>
   )
 }
}
//后面加bind(this),点击时就不会报错了，但是不如用箭头函数优雅

export class Search extends Component {
  state = {
    text:"真帅", 
  }
  onSubmit(e)=>{
    e.preventDefault();
    console.log(this.state.text)
  }
  render() {
    return (
      <button onSubmit={this.onSubmit}><button>
   )
 }
}

react 路由

下载安装react-router-dom

npm install react-router-dom --save
安装完之后
引入APP.js
import {BrowserRouter as Router , Switch,Route } from 'react-router-dom'
 <Router>
      <Navbar title="小说网" />
      <Switch>
        <Route exact path="/" render={props=>(
          <Fragment>
            <Search 
            clearUsers={this.clearUsers}
            showClear={users.length>0 ? true : false }
            searchUsers={this.searchUsers}
            setAlert={this.setAlert}
            />
          </Fragment>
        )}/>
        <Route exact path="/About" component={About} />
      </Switch>
 </Router>
 一般结构是这样的，在根据自己需求改
 Navbar.js
 //跳转路由
import {Link} from 'react-router-dom'
   <Link to="/">home</Link>
   <Link to="/About">About</Link>

父子组件传值

//父组件
import User from './components/users/User'
export default class App extends Component {
  state={
    users:[]
  },
  getUser=  async login =>{
    this.setState({loading:true})
    const res=  await axios.get(`https://api.github.com/search/users/${login}?client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)
    this.setState({user:res.data,loading:false})
  }
}

react 的hooks

1、seState设置和使用hooks的方法
使用的时候
const  app=()=>{
//使用hooks方法
  const [users,setUsera] = useState([])
  const [user,setUser] = useState({})
  const [loading,setLoading] = useState(false)
  const [alert,setAlert] = useState(null)
  //不使用hooks的方法
  // state={ 
  //   users:[],
  //   user:{},
  //   loading:false,
  //   alert:null,
  //   repos:[]
  // }
  //hooks
  const searchUsers= async text => {
    setLoading(true)
    const res=  await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)
    setUsers(res.data.items)
    setLoading(false)
  }  
  //非hooks
  // searchUsers= async text => {
  //   this.setState({loading:true})
  //   const res=  await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)
  //   this.setState({users:res.data.items,loading:false})
  // }  
}

未完待续。。

1、使用useEffect

总会执行一些副作用操作，函数组组件，纯函数、props、固定的输入总会得到固定的输出
什么是副作用？
只想渲染一个dom->dom渲染完了还想执行一段逻辑（副作用）
没有发生在数据向向视图转换过程中的逻辑。
ajax访问原生dom对象，定时器
需要清除的不需要清除的
hook之前，副作用都是不被允许的
—useEffect componentDidMound componentDidUpdate 相同的用图，
seEffect(fn)组件渲染到屏幕之后才会执行返回 一个清除副作用的函数 ，
不返回一般是不需要同步的,需要同步的 useLayoutEffect
如何清除副作用？
componentWiilUnmunt
返回一个清除副作用的函数

2、使用useContext

作用：爷孙组件传值
useContext 使用context的能力
顶层组件
context 和 useContext组件之间的状态共享问题 redux

3、useRef

作用：访问dom节点 ，useEffect去操作dom

4、useMemo&useCallback

作用：useMemo：把创建函数和依赖项数组做为参数传入useMemo
useCallback:接收一个内联回调函数和一个依赖项数组计算的缓存，记忆函数

5、自定义Hook

逻辑功能相通的片段-》封装成单独的函数来使用
自定义Hook 函数
自定义Hook中可以调用官方提供的hook useState
use 开发表示只能在函数式组件中进行使用