React 基础知识总汇（持续更新ing）

最新推荐文章于 2022-07-22 15:11:25 发布

置顶 Lucky_Hole

最新推荐文章于 2022-07-22 15:11:25 发布

阅读量349

点赞数

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/qq_41867188/article/details/107760368

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

React

JSX语法

核心理解

使用 { } 包含的都是JS表达式。（注意：这里说的是JS表达式。例如：if语句、for循环等都不是JS语句，不能直接在 { } 中使用，但可以在JSX语法之外的代码中使用）
使用 <> 包含的都是HTML标签。

JSX中的HTML标签属性名

指定 class 需使用 className
指定 <label> 标签的 for 需使用 htmlFor
事件名称需使用驼峰式命名法，例如指定 click 事件需使用 onClick

自定义组件

自定义组件名必须以大写开头，例如：<HelloWorld />
父组件向子组件传值：使用属性的方式传值，例如：<HelloWorld name={myName} />，在子组件中使用 this.props.属性名取值，例如：this.props.myName（注意：子组件只能读取父组件传来的值，不可以直接修改。如需修改，需通过触发事件，调取父组件的方法去修改。）
子组件向父组件传值：子组件不可以直接向父组件传值，但可以通过触发事件的方式将要传递的值以参数的形式传入父组件。

JS与HTML的结合使用技巧

使用变量表示HTML，例如

...
render(){
    const templateHeader = (
        <div className="header">
            <p>这里是标题</p>
        </div>
    )
    const templateList = (
        <ul>
            {
              [1,2,3].map((item,index)=>{
                return(
                  <li key={index+item}>{item}</li>
                )
              })
            }
        </ul>
    )    

    return(
        <div class="container">
            {templateHeader}
            {templateList}
        </div>
    )
}
...

State

任何时候，不可以直接修改 state 的值。下列写法都是错误的：

1.    this.state.name = '张三'

2.    let list = this.state.list   //此处list指针依然指向this.state.list
      list[0] = "蔬菜"

3.    let myState = {
          name: '张三',
          age: 30  
      }
      this.state = myState

应该使用 setState 方法修改 state 的值：

...
changeMan(myName){
    let man = JSON.parse(JSON.stringify(this.state.man))    //深拷贝
    //  let { man } = this.state   这种写法仅当 man 对象是一维对象时才可以使用。因为解构是浅拷贝
    man.name = myName
    this.setState({
        man
    })
}
...

setState 方法是合并操作，并不是覆盖：

this.setState({
    list: myList 
})

以上代码等同于下列代码（下列写法是错误的，我们仅用于对比）

this.state.list = myList

setState 方法可能是异步的，它拥有第二个参数，是一个回调函数，必要时请使用：

...
  this.state = {
    list: ['a','b']
  }
...
  changeList(){
    let list = JSON.parse(JSON.stringify(this.state.list))
    //  let { list } = this.state   这种情况，可以使用解构赋值
    lsit.push('c')

    this.setState({
      list
    },()=>{
      console.log(this.state.list)      //  ['a','b','c']
    })

    console.log(this.state.list)      //  ['a','b']
  }
...

生命周期（不列举官方即将剔除的生命周期）

挂载阶段

constructor(props,context): react数据初始化阶段。（注意：只要使用了 constructor 就必须写 super() ,否则会导致this指向错误）
```
constructor(props){
    super(props)
    this.state = {
        ...
    }
}
```

render(): 每当组件更新时触发。（组件第一次挂载时也会触发）

render(){
    return(
        <div>
            Hello World!
        </div>
    )
}

componentDidMount(): 组件第一次渲染完成后（加载完DOM后）触发。
```
componentDidMount(){
    ajax请求操作...
}
```

更新阶段

shouldComponentUpdate(nextProps,nextState): 组件在更新前，可决定是否继续更新。经常用于性能优化。如果使用，必须返回true 或 false。返回 false 可阻止组件进一步更新，返回 true 则允许组件更新。
```
shouldComponentUpdate(nextProps,nextState){
    if(nextProps.list === this.props.list){
        return false
    }
    return true
}
```
render(): 每当组件更新时触发。
componentDidUpdate(prevProps,prevState): 每当组件更新完毕后触发。

卸载阶段

componentWillUnmount (): 组件卸载前触发。

componentWillUnmount(){
    window.clearTimeout(timeId)
}

Redux

action

action: 用于描述 state 要更新，但不描述怎么更新：

updateListAction = {
    type: 'UPDATE_LIST_ACTION',    //type为必传字段
    list: newList    //此处为用户自定义字段，也可以是多个字段
}

action创建函数: 用于创建action的函数，注意区别它与 action 的概念：

function createUpdateListAction(newList){
    return {
        type: 'UPDATE_LIST_ACTION',
        list: newList
    }
}

reducer

reducer: 用于指定如何更新 state(注意：这里不能在方法内直接修改state的值)：

function todoApp(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_LIST_ACTION':
      return {
        ...state,
        list: action.list
      }
    default:
      return state
  }
}

store

store: 用于将action和reducer联系起来。实际的数据改变也是在store中进行的。
getState(): 用于获取state的值。
dispatch(action): 用于分发action，将action分发出去，才能改变state的值。

Lucky_Hole

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 基础知识总汇（持续更新ing）

ReactJSX语法核心理解使用 { } 包含的都是JS表达式。（注意：这里说的是JS表达式。例如：if语句、for循环等都不是JS语句，不能直接在 { } 中使用，但可以在JSX语法之外的代码中使用）使用<>包含的都是HTML标签。 JSX中的HTML标签属性名指定 class 需使用 className 指定 <label> 标签的 for 需使用 htmlFor 事件名称需使用驼峰式命名法，例如指定 click 事件需使用 onClick..
复制链接

扫一扫