React组件实例的三大核心属性

努力做一只合格的前端攻城狮

已于 2022-03-19 16:33:43 修改

阅读量674

点赞数 1

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

于 2022-03-09 10:03:04 首次发布

本文链接：https://blog.csdn.net/shao_xuan_/article/details/123327061

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

三分钟看完React组件实例的三大核心属性

props
state
refs
- refs的使用
- - 使用 React.createRef() 创建 refs
  - 回调形式创建refs

props

React框架定义了一个Props的概念，专门用来实现React函数组件接受参数的输入。

直接传参

将要传递的参数放在需要被传递的组件中

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            render() {
                console.log(this.props)
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>姓名:{this.props.food}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Zy name='小花猫' food='鱼' />, root);
    </script>
</body>

批量传参

使用解构的方法将参数放在组件中

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            render() {
                console.log(this.props)
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>姓名:{this.props.food}</li>
                    </ul>
                )
            }
        }
        let test = {name:'小花猫',food:'鱼'}
        ReactDOM.render(<Zy {...test} />, root);
    </script>
</body>

参数类型限制

对参数进行类型限制需要引进prop-types库

在组件上添加defaultProps属性设置props的默认值
设置propType属性来对props进行类型检查。

函数组件中用法如下：

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        function Person(props) {
            const { name, age, address } = props;
            return (
                <ul>
                    <li>姓名：{ name }</li>
                    <li>年龄：{ age }</li>
                    <li>地址：{ address }</li>
                </ul>
            )
        }
        Person.defaultProps = {
            name:'张飞',
            age:28,
            address:'jic'
        }
        //类型限制
        Person.propTypes = {
                name:PropTypes.string.isRequired,//string类型，必须
                age:PropTypes.number,
                address:PropTypes.string
            }
        ReactDOM.render(<Person />,root)
    </script>
</body>

类组件的用法如下

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            static propTypes = {
                name:propTypes.string.isRequire,
                food:propTypes.string
            }
            static defaultProps = {
                name:'小狗',
                food:'骨头'
            }
            render() {
                console.log(this.props)
                return (
                    <ul>
                        <li>姓名:{this.props.name}</li>
                        <li>姓名:{this.props.food}</li>
                    </ul>
                )
            }
        }
        ReactDOM.render(<Zy name="小花猫" food="鱼" />, root);
    </script>
</body>

state

在React框架中定义了一个状态(State) 概念，并通过状态(State) 来实现React组件的状态机特性。所谓React组件的“状态机”特性，就是指组件通过与用户的交互，实现不同的状态，然后通过渲染UI保证用户界面和数据一致性。
React框架之所以定义这个状态(State) 概念，其目的就是仅仅通过更新React组件的状态(State) ，就可以实现重新渲染用户界面的操作(这样就不需要操作DOM了) 。这点也正React设计理念相较于其他前端框架的先进之处。

创建方式

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            constructor(props){
                super(props),
                this.state={
                    info:'Hello'
                }
            }
            render(){
                const {info} = this.state;
                return <h2>{info}</h2>
            }
        }
        ReactDOM.render(<Zy />, root);
    </script>
</body>

事件绑定

响应函数采用小驼峰命名法：onClick,onChange等。
state不能直接修改，需要使用setState方法更新。

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            constructor(props){
                super(props),
                this.state={
                    info:'Hello'
                }
            }
            sayHi(){
                this.setState({
                    info:'Hi'
                })
            }
            render(){
                const {info} = this.state;
                return <h2 onClick={this.sayHi.bind(this)}>{info}</h2>
            }
        }
        ReactDOM.render(<Zy />, root);
    </script>
</body>

类组件自定义方法的this绑定

在构造器中绑定this

this.sayHi = this.sayHi.bind(this);

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            constructor(props){
                super(props),
                this.state={
                    info:'Hello'
                }
                this.sayHi = this.sayHi.bind(this);
            }
            sayHi(){
                this.setState({
                    info:'Hi'
                })
            }
            render(){
                const {info} = this.state;
                return <h2 onClick={this.sayHi}>{info}</h2>
            }
        }
        ReactDOM.render(<Zy />, root);
    </script>
</body>

在回调函数中绑定

<h2 onClick={this.sayHi.bind(this)}>

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            constructor(props){
                super(props),
                this.state={
                    info:'Hello'
                }
            }
            sayHi(){
                this.setState({
                    info:'Hi'
                })
            }
            render(){
                const {info} = this.state;
                return <h2 onClick={this.sayHi.bind(this)}>{info}</h2>
            }
        }
        ReactDOM.render(<Zy />, root);
    </script>
</body>

使用箭头函数

sayHi=()=>{ this.setState({ info:'Hi' }) }

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class Zy extends React.Component {
            constructor(props){
                super(props),
                this.state={
                    info:'Hello'
                }
            }
            sayHi=()=>{
                this.setState({
                    info:'Hi'
                })
            }
            render(){
                const {info} = this.state;
                return <h2 onClick={this.sayHi}>{info}</h2>
            }
        }
        ReactDOM.render(<Zy />, root);
    </script>
</body>

refs

refs 提供一种访问在render方法中DOM节点或者React元素的方式。
你可以通过它获得DOM节点或者React元素。

refs的使用

使用 React.createRef() 创建 refs

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class MyComponent extends React.Component {
            constructor(props) {
                this.myRef = React.createRef();
            }
            render() {
                return (
                    <div ref={this.myRef} />
                )
            }
        }
        ReactDOM.render(<MyComponent />,root);
    </script>
</body>

使用current属性，对节点的引用进行访问。

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class MyComponent extends React.Component {
            constructor(props) {
                super(props)
                this.myRef = React.createRef();
            }
            focusTextInput() {
                // 注意：通过 "current" 取得 DOM 节点
                alert(this.myRef.current.value)
            }

            render() {
                return (
                    <div>
                        <input
                            type="text"
                            ref={this.myRef} //把 <input> ref 关联到构造器里创建的 `myRef` 上
                        />
                        <button onClick={this.focusTextInput.bind(this)}>点我</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<MyComponent />, root);
    </script>
</body>

回调形式创建refs

<body>
    <div id="root"></div>
    <script type="text/babel">
        let root = document.getElementById('root');
        class MyComponent extends React.Component {
            constructor(props) {
                super(props)
            }
            focusTextInput = ()=>{
                const {myRef} = this;
                alert(myRef.value)
            }
            render() {
                return (
                    <div>
                        <input
                            type="text"
                            ref={currentNode=>this.myRef = currentNode} //把 <input> ref 关联到构造器里创建的 `myRef` 上
                        />
                        <button onClick={this.focusTextInput.bind(this)}>点我</button>
                    </div>
                );
            }
        }
        ReactDOM.render(<MyComponent />, root);
    </script>
</body>

努力做一只合格的前端攻城狮

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React组件实例的三大核心属性

三分钟看完React组件实例的三大核心属性props直接传参批量传参参数类型限制state创建方式事件绑定类组件自定义方法的this绑定在构造器中绑定this在回调函数中绑定使用箭头函数refsrefs的使用使用 React.createRef() 创建 refs回调形式创建refspropsReact框架定义了一个Props的概念，专门用来实现React函数组件接受参数的输入。直接传参将要传递的参数放在需要被传递的组件中<body> <div id="root"&
复制链接

扫一扫