React基础篇 -- state&props&refs

Posted 2021-01-30 adoctors

内容简介

• state
• props
• refs
• 行内样式及动态类名

state

基本介绍

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

初始化状态:

constructor() {
  super()
  this.state = {
    stateName1 : stateValue1,
    stateName2 : stateValue2
  }
}

读取显示:

this.state.stateName1

更新状态-->更新界面 :

this.setState({stateName1 : newValue})

举例如下：

class Myconponent1 extends React.Component{
    constructor(props){
        super(props)
        //   1、初始化状态
        this.state = {
            isLike:false
        }
        //将新增的方法中的this强制绑定为组件对象
        this.fun = this.fun.bind(this)
    }
    //新添加方法：内部this默认undefined
    fun(){
        //得到原有的状态
        let flag = !this.state.isLike
        //  3、更新状态(因为是单向数据流，只能通过指定方式改变状态)
        this.setState({
            isLike:flag
        })
    }
    render(){
        //  2、读取状态
        const {isLike}=this.state；
        return <h1 onClick={this.fun}>{isLike?‘you like me?‘:‘i like you!‘}</h1>
        //可以直接这样写，但效率低 return <h1 onClick={this.fun.bind(this)}>{flag?‘you like me?‘:‘i like you!‘}</h1>
    }
}

理解上面后可简化写法：

class Myconponent1 extends React.Component{
    state = {
        isLike:false
    }
    fun=()=>{
        let {isLike}=this.state;
        this.setState({
            isLike:!isLike
        })
    }
    render(){
        const {isLike}=this.state；
        return <h1 onClick={this.fun}>{isLike?‘you like me?‘:‘i like you!‘}</h1>
    }
}

注意

状态更新可能是异步的，不应该依靠它们的值来计算下一个状态。

可使用第二种形式的 setState() 来接受一个函数而不是一个对象。

该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

props

基本介绍

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据(包括函数方法)。

props是所有组件标签的属性的集合对象。

作用：给标签指定属性, 从目标组件外部向组件内部传递数据(可能是一个function)。

在组件内部读取属性: this.props.propertyName

扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

默认 Props

你可以通过组件类的 defaultProps 属性为 props 设置默认值，实例如下：

class Hello extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
Hello.defaultProps = {
  name: ‘adoctors‘
};

Props 验证

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，javascript 控制台会抛出警告。

相关链接：http://npm.taobao.org/package/prop-types

子组件响应父组件变化

componentWillReceiveProps(newVal){
    console.log("newVal",newVal)
}

举例如下：

function Persion(props){
    return (
        <ul>
            <li>姓名：{props.name}</li>
            <li>年龄：{props.age}</li>
            <li>性别：{props.sex}</li>
        </ul>
    )
}
// 默认属性值
Persion.defaultProps={
    name:"tom",
    age:18,
    sex:"男"
}
//对属性值的类型和必要性限制，需要引入新文件
Persion.propTypes={
    name:PropTypes.string.isRequired,       //string且必须有
    age:PropTypes.number                    //number可以没有
}
let msg={
    name:"adoctors",
    age:15,
    sex:"男"
}

ReactDOM.render(<Persion {...msg}/>,document.getElementById((‘com‘)))
//只传name,可以直接写则类型为string，若用{}包裹则可以传成number
ReactDOM.render(<Persion name="jack" age={28} />,document.getElementById((‘com1‘)))

refs

React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

下面是几个适合使用 refs 的情况：

• 处理焦点、文本选择或媒体控制。
• 触发强制动画。
• 集成第三方 DOM 库

如果可以通过声明式实现，则尽量避免使用 refs。

不能在函数式组件上使用 ref 属性，因为它们没有实例。

//指定ref
<div ref="myDiv" style={{color:"red"}}>adoctors</div>
<input type="text" ref="ipt0"/> 
<input type="text" ref={val=>this.ipt1=val}/>
<input type="text" onBlur={this.getVal}/>

//获取相应的值
getVal=(e)=>{
    console.log(‘获取其他元素的(myDiv)的样式： ‘,this.refs.myDiv.style.color);
    console.log(‘获取其他元素的(ipt0)值： ‘,this.refs.ipt0.value)
    console.log(‘获取其他元素的(ipt1)值： ‘,this.ipt1.value)
    console.log(‘获取本元素的值： ‘, e.target.value);
}

结果如图：

行内样式

变量控制

let flag={
        display:this.props.list.length?‘none‘:‘block‘
    }
<div style={flag}>暂无评论</div>

行内单个样式

<div style={{display: this.props.list.length ? "block" : "none"}}>此标签是否隐藏</div>

行内多个样式

<div style={{display: (index===this.state.currentIndex) ? "block" : "none", color:"red"}}>此标签是否隐藏</div>

动态类名

1、标签中没有其他class，只需要动态添加一个.active的className，来显示内容是否被选中状态，则：

<div className={index===this.state.currentIndex?"active":null}>此标签是否选中</div>

2、如果标签本身有其他class，又要动态添加一个.active的className，来显示内容是否被选中状态，则：

<div className={["container tab", index===this.state.currentIndex?"active":null].join(‘ ‘)}>此标签是否选中</div>

注意空格

或者，使用ES6写法（推荐使用ES6写法）：

<div className={`container tab ${index===this.state.currentIndex?"active":null}`}>此标签是否选中</div>