2018-05-03 10:39:20 shb2058 阅读数 344
  • React Hooks 案例详解(React 进阶必备)

    前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。

    293 人正在学习 去看看 吕建军

1.props和state的区别,state是内部的,内部的操作触发setState方法;props类似于Java的构造器传过来的参数,一般是外界传入的数据。

2.例子:主view由于点击事件,触发state中的数据变动,该state的数据又是子view的props中的数据

import React from 'react'

class MyOwnPage extends React.Component {

    constructor(props) {
        super(props);
        this.state = {datas: [], data: '', index: 0};
        this.clickButton = this.clickButton.bind(this);

    }

    render() {
        return (
            <div>
                <h1>已插入信息</h1>
                <DetailList datas={this.state.datas}/>
                <input id={'input'}></input>
                <button onClick={this.clickButton}>添加</button>

            </div>


        );
    }

//点击按钮的方法
    clickButton() {
        console.log("点击了提交" + this.state.data);


        this.setState((prevState) => (
                {data: document.getElementById('input').value})
            , function () {
                console.log("设置的数据完毕");
                var bean = {
                    value: this.state.data,
                    id: this.state.index
                };
                this.setState((prevState) => ({
                    datas: prevState.datas.concat(bean)
                }), function () {
                    console.log("数据长度" + this.state.datas.length);
                    this.setState((preState) => (
                        {index: preState.index + 1}
                    ));
                });
            });


    }
}

export default MyOwnPage;

//类似于自定义view====这里使用了props
class DetailList extends React.Component {

    render() {
        console.log("传递过来的数据长度" + this.props.datas.length);
        return (
            <ul>
                {this.props.datas.map(function (bean) {
                    console.log("这个的数据" + bean.id + bean.value);
                    return <li key={bean.id}>{bean.value}</li>;
                })}
                {/*es6的forEach*/}
                {/*{*/}
                {/*this.props.datas.map(bean => (*/}
                {/*<li key={bean.id}>{bean.value}</li>*/}
                {/*))*/}
                {/*}*/}
            </ul>
        );
    }

    test() {
        /*//遍历使用forEach*/

        {
            this.props.datas.forEach((bean) => (
                <li key={bean.id}>{bean.value}</li>))
        }

        {/*//遍历使用map*/
        }
        {
            this.props.datas.map(bean => (
                <li key={bean.id}>{bean.value}</li>
            ))
        }


//ES5的each
        {
            this.props.datas.forEach(function (bean) {
                console.log("数据如下:" + bean.key + bean.value);
                return <li key={bean.id}>{bean.value}</li>;
            })
        }
        //ES5的map
        {
            this.props.datas.map(function (bean) {
                return <li key={bean.key}>{bean.value}</li>;
            })
        }
    }
}

2017-05-06 16:50:52 qq_32584661 阅读数 518
  • React Hooks 案例详解(React 进阶必备)

    前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。

    293 人正在学习 去看看 吕建军

需求:定义一个复合组件,设置组件自身属性this.props
学习:组件自身属性this.props

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>
</head>

<body>

<div id="container"></div>


<script type="text/babel">

   /*
    props、state
    props是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常是由父层组件向子层组件传递)
    注意:props对象中的属性和组件的属性一一对应,不要直接去修改props中的属性的值

    需求:定义一个复合组件WebShow,功能:输出网站的名字和网址,网址是一个可以点击的链接
    分析:定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击

    思路:
    1.给WebShow设置两个属性,wname 、wlink
    2.WebShow的props对象增加了两个属性值
    3.WebName从WebShow的pros对象中获取wname的值,即网站名称
    4.WebLink从WebShow的pros对象中获取wlink的值,即网站地址

   */



   //定义组件:webName
   var WebName = React.createClass({
       render:function () {
           return <h1>{this.props.wname}</h1>
       }
   });



   //定义组件:webLink
   var WebLink = React.createClass({
       render:function(){
           return <a href={this.props.wlink}>{this.props.wlink}</a>
       }
   });

   //定义复合组件:webShow
   var WebShow = React.createClass({
       render:function(){
           return (
                   <div>
                       <WebName wname={this.props.wname}/>
                       <WebLink wlink={this.props.wlink}/>
                   </div>
           )
       }
   });

   //渲染
   ReactDOM.render(
       <WebShow wname="百度一下" wlink="http://www.baidu.com"/>,
       document.getElementById("container")
   )



</script>

</body>
</html>

2019-06-25 11:56:21 weixin_42260975 阅读数 13
  • React Hooks 案例详解(React 进阶必备)

    前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。

    293 人正在学习 去看看 吕建军

React ——props

初学react-props,在网上搜索到了一篇对我帮助很大的文章,以此为借鉴,附上文章地址:https://segmentfault.com/a/1190000011184076 ,以表感谢!!!现记录一下自己的学习过程,以备后续(ps:文章中文字表述摘自上篇文章,代码为自己联系的demo)~~

props

React的核心思想就是组件化思想,页面会被切分成一些独立的、可复用的组件。
组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据。由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据。

props的用法

{this.props.xxx}

props的只读性

props经常被用作渲染组件和初始化状态,当一个组件被实例化之后,它的props是只读的,不可改变的。如果props在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中

父组件:Home

import React from 'react';
import Children from './children'
import '../css/home.scss';
import {NavBar,Icon,SearchBar} from 'antd-mobile';

class Home extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            value:"小明"     
        }
    }

    inputChange(){
        let val=this.refs.searchValue.value;
        this.setState({
            value:val
        })
    }

    searchClick(){
        console.log(this.state.value)
    }
    
    render(){
        return(
            <div className="faterCom">
                <NavBar icon={<Icon key="1" type="left" />}>state</NavBar>
                <div className="topsearch"><input type="text" placeholder="请输入关键字" className="search" ref='searchValue' onChange={()=>this.inputChange()}/><span onClick={this.searchClick.bind(this)}>搜索</span></div>
                
                //在父组件中引入子组件,使用msg={this.state.value}方法将父组件中的值传给子组件
                <Children msg={this.state.value}></Children>  
            </div>
        )
    }
}



export default Home;

子组件Children

import React from 'react';
// import '../css/home.scss';
import {NavBar,Icon,List,DatePicker} from 'antd-mobile';

class Children extends React.Component {
    constructor(props){
        super(props);
        console.log(props);     //打印从父组件中传来的值,结果:{msg: "小明"}
        this.state = {

        }
    }

    render(){
        return(
            <div> </div>
        )
    }
}

export default Children;

props设置默认参数

在组件中,我们最好为props中的参数设置一个defaultProps,并且制定它的类型

在这里插入图片描述

props的类型检查——PropTypes

  1. 安装:npm install prop-types --save-dev
  2. 引入:import PropTypes from ‘prop-types’;
    (注:React v15.5 起, React.PropTypes 已移入另一个包中, 请使用 prop-types 库代替)
  3. 使用:
    (注:当传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。出于性能方面的考虑,propTypes 仅在开发模式下进行检查。)
    Children.prototypes={
    name:PropTypes.string.isRequire
	}

类型:

1.字符串类型PropTypes.string
2. 布尔类型PropTypes.bool
3. 函数类型PropTypes.func
4. 数组类型PropTypes.array
5. 数字类型PropTypes.number
6. 对象类型PropTypes.object
7. 元素PropTypes.element
8. 传入任何东西都可以PropTypes.node
9. 选择特定值PropTypes.oneOf([‘是’, ‘否’, “是否”])
10. 选择诸多类型中的一种(任意类型)PropTypes.oneOfType:
11. 具有某种类型的数组PropTypes.arrayOf(PropTypes.number):
12. 具有某种类型属性值的对象PropTypes.objectOf(React.PropTypes.number)
13. 样式类型PropTypes.shape
14. 任何数据类型PropTypes.any.isRequired

更多类型可见React中文文档:https://react.docschina.org/docs/typechecking-with-proptypes.html

总结

props是一个从外部传进组件的参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新的props来重新渲染子组件,否则子组件的props以及展现形式不会改变

2019-10-18 11:30:43 biaogeshiwo 阅读数 21
  • React Hooks 案例详解(React 进阶必备)

    前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。

    293 人正在学习 去看看 吕建军

React关于 this.props.children 总结

props

react是单向数据流,props是我们从上个组件传值传下来的集合,每一个props都应该对应的是从上个组件传过来的值。但是这里有一个例外,那就是this.props.children,如下所示
在这里插入图片描述
打印结果
在这里插入图片描述

this.props.children 的值有三种可能:
如果当前组件没有子节点,它就是 undefined ;
如果有一个子节点,数据类型是 Object
如果有多个子节点,数据类型就是 Array

所以,处理 this.props.children 的时候要小心

React 提供一个工具方法 React.Children 来处理 this.props.children 。可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 Object Array
在这里插入图片描述

页面如下
在这里插入图片描述

 <Test>hk-child</Test>
 <Test/>
 <Test>
   <ul>
     <li>111</li>
     <li>222</li>
   </ul>
 </Test>
 <Doit>
   <span>hk-1</span>
   <span>hk-2</span>
   <span>hk-3</span>
 </Doit>
 
class Test extends React.Component {
  render() {
    return (
      <div className="red">
        <h5>Hello hk</h5>
        { this.props.children }
      </div>
    )
  }
}

class Doit extends React.Component{
  render(){
     return (
          <ul>
           {
                React.Children.map(this.props.children, function (value,key) {
                       return <li>{value}----{key}</li>;
                })
            }
          </ul>
     );
  }
};
2019-06-21 16:13:24 qq_21948951 阅读数 7
  • React Hooks 案例详解(React 进阶必备)

    前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。

    293 人正在学习 去看看 吕建军

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

使用 Props

React 实例

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);

实例中 name 属性通过 props.name 来获取.

默认 Props

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

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);
State 和 Props

以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

class WebSite extends React.Component {
  constructor() {
      super();
 
      this.state = {
        name: "菜鸟教程",
        site: "https://www.runoob.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
 
 
 
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

转自:https://www.runoob.com/react/react-props.html

react设置默认props

阅读数 9733

React Props

阅读数 33

React传递Props

阅读数 13536

没有更多推荐了,返回首页