React基础学习

React是一个用于构建用户界面的JavaScript库

一、基础知识学习

1. JSX

const element = <h1>hello world<h1>

JSX是一个JavaScript的语法扩展遵循xml和html语法。

可以在JSX中使用表达式：

const name = 'lucy';
const element = <h1>hello {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById("root")
)

JSX也是一个表达式
可以在if语句和for循环语句的代码块中使用JSX,将JSX赋值给变量，把JSX当做参数传入，以及从函数中返回JSX

var name = "lucy"
function greeting(name){
  if(name){
    return <h1>Hello, {name}</h1>
  }
  return <h1>Hello Stranger</h1>
}

JSX特定属性

const element = <div name="lucy"></div>

const element = <img src={user.avatar}></img>

注意：JSX语法上更接近JS，所以React DOM使用小驼峰（cameCase）命名来定义属性的名称，而不使用HTML属性名称的命名约定。
例如，JSX中class变成了ClassName,onclick变成了onClick.

2. 组件

类似于JS函数，接受任意入参（props）,并返回用于描述页面展示内容的React元素。

函数组件

function Welcome(props){
  return <h1>Hello {props.name}</h1>
}

class组件

class Welecome extends React.Component{
  render(){
    return <h1>Hello,{this.props.name}</h1>
  }
}

这两个组件在React里是等效的。

注意：组件名称必须大写字母开头（React会将小写字母开头组件视为原生DOM标签）

3. Props

纯函数：函数不会更改入参，且多次调用下相同的入参始终返回相同的结果。

function sum(a,b){
  return a+b
}

组件无论如何都不能修改自身props，所有的组件都必须像纯函数一样保护它们的props不被修改。
定义与使用：

function Welcome (props){
  return <h1>{props.name}</h1>
}

ReactDOM.render(
  <Welcome name="jack"/>,
  document.getElementById("root")
)

4. State

State与props类似，但是state是私有的，并且完全受控于当前组件，可以将当前组件state当做子组件的props传递。
定义与使用:

class Welcome extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name:"lucy"
    }
  }
  render(){
    return(
      <div>
        <h1>welcome!!!</h1>
        <h1>{this.state.name}</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <Welcome/>,
  document.getElementById("root")
)

5. setState

React规定不要直接修改State
因此需要使用setState()方法实现修改state

例如，此代码不会重新渲染组件

//假如组建中state为 this.state = {name : "jack"}
this.state.name = "lucy"

而使用setState就可以

this.setState({
  name:"lisa"
})

构造函数是唯一可以给this.state赋值的地方。

State的更新可能是是异步的。
因为this.props和this.state可能会异步更新，所以不要依赖他们的值。

//wrong
this.setState({
  name:this.state.firstName + this.props.lastName,
})

解决：让setState()接收一个函数而不是一个对象，这个函数用上一个state作为第一个参数，将此次更新被应用时的props作为第二个参数：

//correct
this.setState((state,props)=>{
  name:state.firstName + props.lastName 
});

setState方式是异步的：

//...假设组件的state = {name:"lisa"},组件上有个按钮点击执行handleClick事件
handleClick(){
  this.setState({
    name:"lucy"
  },()=>{
    console.log("setState()执行完毕")
  })
  console.log('setState()执行之前')
}

setState()方法接收第二个参数，类似于一个回调函数，当数据更新之后才会执行回调里面的方法，上述代码输出顺序为“setState()执行之前”=>“setState()执行完毕”。

关于setState可以参考这篇文章：你真的理解setState吗？

6. 生命周期

组件生命周期三个阶段

  • Mounting（加载阶段）
  • Updating（更新阶段）

  • Unmounting（卸载阶段）


    react生命周期

Mounting阶段执行钩子函数：

  • constructor
  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

Updating阶段执行钩子函数：
当props发生改变

  • compoentWillReceProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

当state发生改变

  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

Unmounting阶段执行钩子函数：

  • componentWillMount

7. 事件处理

  • React事件的命名采用小驼峰式（camelCase），而不是纯小写。
  • 使用JSX语法时需要传入一个函数作为事件处理函数，而不是一个字符串。

事件处理函数中的this:

class Toggle extends React.Component {
  constructor(props){
    super(props)
    this.state = {isToggle:true};
  }
  handleClick(){
    this.setState((state)=>({
       isToggle:!state.isToggle
    }));
  }
  render(){
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggle ? "ON" : "OFF"}
      </button>
    )
  }
  ReactDOM.render(
    <Toggle />,
    document.getElementById("root")
  )
}

此时handleClick中的this指向为undefined，因为this.handleClick传给了button组件后是丢失了this的！如下：

var obj = {
  f : function(){
    console.log(this)
  }
}

function foo(f){
  f()
}
foo(obj.f)

个人觉得这个例子很形象，foo运行时接收到的参数 f 时，foo是并不知道 f 是obj的属性，也就是常说的丢失了上下文。

关于React中this指向问题可以参考知乎文章https://www.zhihu.com/question/68092028?sort=created

this指向更正比较主流的有三种，第一种是在调用时绑定:

render(){
  return (
      <button onClick={this.handleClick.bind(this)}>
        {this.state.isToggle ? "ON" : "OFF"}
      </button>
  )
}

第二种是在constructor中绑定：

constructor(){
  this.handleClick = this.handleClick.bind(this);
}
render(){
     <button onClick={this.handleClick}>
        {this.state.isToggle ? "ON" : "OFF"}
      </button>
}

第三种是使用public class fields语法：

handleClick = ()=>{
  console.log(this)
}
render(){
  return ( 
    <button onClick = {this.handleClick}>
      Click me
    </button>
  )
}

还有一种是在调用的时候直接用一个箭头函数包起来：

render(){
  return ( 
    <button onClick = {()=>{this.handleClick()}}>
      Click me
    </button>
  )
}

响事件处理程序中传递参数：

handleClick(id,e){
   e.preventDefault();
}

<button onClick = {(e)=>{this.handleClick(id,e)}}>Delete</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete</button>

这两种情况下，React的事件对象e会被作为第二个参数传递，如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过bind的方式，事件对象以及更多的参数将会被隐式的进行传递。

8. 组件通信

父子通信：通过props数据由父组件流向子组件

// Father.js
import React , {Component} from 'react';
import Child from './Child';
export default class Father extends Component {
    constructor(){
        super()
        this.state = {
            name:"father",
            age:20
        }
    }
    render(){
        return(
        <div>
            {this.state.name}
            <div><Child faname={this.state.name}/></div>
        </div>
        )
    }
}

//Child.js
import React ,{ Component }  from 'react'
export default class Child extends Component{
    constructor(){
        super()
        this.state = {
            name:"Child",
            age:10
        }
    }
    render(){
        return (
        <div>{this.state.name}</div>
        )
    }
    componentWillMount(){
        this.setState({
            name:this.props.faname
        })
    }
}

父组件中的state通过给子组件传递属性的方式传递给子组件，子组件可以通过this.props.属性名获取到。

子父通信：通过方法通信（可以理解为回调函数通信），在子组件中触发一个通过props接收的从父组件传递过来的事件，并把子组件的state通过参数传递给事件，这样在父组件的方法中就能获通过参数获取子组件中的state

//Father.js
import React , {Component} from 'react';
import Child from './Child';
export default class Father extends Component {
    constructor(){
        super()
        this.state = {
            name:"father",
            age:20
        }
    }
    render(){
        return(
        <div>
            {this.state.name}
            <div><Child toChildEvent = {this.getChildState.bind(this)}/></div>
        </div>
        )
    }
    getChildState(childName){
        this.setState({
            name:childName
        })
    }
}


//Child.js
import React ,{ Component }  from 'react'
export default class Child extends Component{
    constructor(){
        super()
        this.state = {
            name:"Child",
            age:10
        }
    }

    render(){
        return (
        <div>{this.state.name}</div>
        )
    }
    componentWillMount(){
        this.props.toChildEvent(this.state.name);
    }
}

首先在父组件中定义一个方法，叫做getChildState，然后通过属性绑定给<Child/>组件，属性名为toChildEvent(自定义)，之后在子组件中通过props接收到该toChildEvent属性，也就是getChildState方法，然后在componentWillMount生命周期钩子函数中执行，并传入参数，然后就在父组件中getChildState方法可以通过参数获得子组件中state。

兄弟通信：采用状态提升方案，将兄弟间需要共享的数据，通过子父方法通信传递给最近共同父组件，之后通过父组件再通过props将数据流向各子组件

可以参考官网状态提升

待续。。。。。。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,744评论 6赞 502
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,505评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,105评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,242评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,269评论 6赞 389
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,215评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,096评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,939评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,354评论 1赞 311
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2赞 333
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,448评论 5赞 344
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,048评论 3赞 327
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2赞 369
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2赞 354