02_React的组件

React的组件

组件的使用

当应用是以多组件的方式实现，这个应用就是一个组件化的应用

注意：

1. 组件名必须是首字母大写
2. 虚拟DOM元素只能有一个根元素
3. 虚拟DOM元素必须有结束标签 < />

渲染类组件标签的基本流程

1. React 内部会创建组件实例对象
2. 调用render()得到虚拟 DOM ,并解析为真实 DOM
3. 插入到指定的页面元素内部

函数式组件

//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcom name = "world" />,document.getElementById("div"));

上面的代码经历了以下几步

1. 我们调用 ReactDOM.render() 函数，并传入 作为参数。
2. React 调用 Welcome 组件，并将{name: 'world'}作为 props 传入。
3. Welcome 组件将Hello, world元素作为返回值。
4. React DOM 将 DOM 高效地更新为 Hello,world。

类式组件

class MyComponent extends React.Component {
    state = {isHot:false}
    render() {
        const {isHot} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>	
       //return <h1 onClick={this.changeWeather.bind(this)}>今天天气很{isHot?'炎热':'凉爽'}</h1>
    }
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
    /**
    changeWeather(){
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
    */
}
ReactDOM.render(<MyComponent/>,document.querySelector('.test'))

在优化过程中遇到的问题

1. 组件中的 render 方法中的 this 为组件实例对象
2. 组件自定义方法中由于开启了严格模式，this 指向 undefined 如何解决
   1. 通过 bind 改变 this 指向
   2. 推荐采用箭头函数，箭头函数的 this 指向
3. state 数据不能直接修改或者更新

受控组件与非受控组件

包含表单元素的组件分为非受控租价与受控组件

• 受控组件：表单组件的输入组件随着输入并将内容存储到状态中（随时更新）
• 非受控组件：表单组件的输入组件的内容在有需求的时候才存储到状态中（即用即取）

组件实例的三大属性

state

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

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

简单的说state就是组件的状态，也就是该组件所存储的数据

类式组件中使用：

class Weather extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            weather:'cool'
        }
    }
    /**
    state = {
        weather:'hot'
    }
    */
    render(){
        return <h1>当前温度：{this.state.weather}</h1>
    }
}

使用的时候通过this.state调用state里的值

在类式组件中定义state

• 在构造器中初始化state
• 在类中添加属性state来初始化

修改state

如果在类式组件的函数中，直接修改state值

this.state.weather = '凉爽'

这时候会发现页面内容不会改变，原因是 React 中不建议 state不允许直接修改，而是通过类的原型对象上的方法 setState()

this.setState(partialState, [callback]);

• partialState: 需要更新的状态的部分对象
• callback: 更新完状态后的回调函数

setState有两种写法：

/*写法一*/
this.setState({
    weather: "凉爽"
})

/*写法二*/
// 传入一个函数，返回x需要修改成的对象，参数为当前的 state
this.setState(state => ({count: state.count+1});

setState是一种合并操作，不是替换操作

• 在执行 setState操作后，React 会自动调用一次 render()
• render() 的执行次数是 1+n (1 为初始化时的自动调用，n 为状态更新的次数)

props

与state不同，state是组件自身的状态，而props则是外部传入的数据

类式组件中使用：

class Person extends React.Component{
    render(){
        return (
        	<ul>
            	<li>{this.props.name}</li>
                <li>{this.props.name}</li>
                <li>{this.props.name}</li>
            </ul>
        )
    }
}
ReactDOM.render(<Person name="hhh" age="20" sex="男" />,document.getElementById("div"))

在使用的时候可以通过 this.props来获取值 类式组件的 props:

1. 通过在组件标签上传递值，在组件中就可以获取到所传递的值
2. 在构造器里的props参数里可以获取到 props
3. 可以分别设置 propTypes 和 defaultProps 两个属性来分别操作 props的规范和默认值，两者都是直接添加在类式组件的原型对象上的（所以需要添加 static）
4. 同时可以通过…运算符来简化

如下所示：

class Person extends React.Component{
    render(){
        return (
        	<ul>
            	<li>{this.props.name}</li>
                <li>{this.props.name}</li>
                <li>{this.props.name}</li>
            </ul>
        )
    }
    
    //对组件的属性进行限制
    static propTypes = {
        name:PropTypes.string.isRequired,//限定name是string类型，isRequired必须要传递
        sex:PropTypes.string, //限定sex是string类型
        speak:PropTypes.func //限定speak是function类型
    }
    
    //指定默认的标签属性
    static defaultProps = {
        sex:"男",
        age:18
    }
}
const p = {name:"hhh", age:"20", sex:"男"}
ReactDOM.render(<Person {...p}/>,document.getElementById("div"))

refs

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在我们正常的操作节点时，需要采用DOM API 来查找元素，但是这样违背了 React 的理念，因此有了refs

有三种操作refs的方法，分别为：

• 字符串形式（这个方法和Vue中的ref比较相像，这个方法官方文档是不太建议使用的）
• 回调形式

<input ref={currentNode => this.input1 = currentNode } type="text" placeholder="点击按钮提示数据"/>
    
//currentNode会接收到当前节点作为参数，ref的值为函数的返回值，也就是this.input1 = currentNode，因此是给实例下的input1赋值

• createRef形式

<input ref={this.MyRef} type="text" placeholder="点击弹出" />
<input ref={this.MyRef1} type="text" placeholder="点击弹出" />
//在类中
MyRef = React.createRef();
MyRef1 = React.createRef();