赖同学


  • 首页

  • 标签

  • 分类

  • 归档

  • 站点地图

  • 留言

  • 搜索

react-day3

发表于 June 5, 2018|分类于 react相关|阅读次数: –
字数统计: 1001|阅读时间: 5 min

react 学习笔记day-03

组成与继承 Composition vs Inheritance


React具有巨大的组合模型,推荐使用组件组合而不是用继承

Containment

很多组件一开始并不知道它们的子组件是什么,例如侧边栏,对话框等 建议这样的组件用特殊的子类( children )将参数直接传到它们的输出

function FancyBorder(props){
    return(
        <div className = {'FancyBoder FancyBorder-' +props.color}>
        {props.children}
        </div>
    )
}

让组件通过嵌套JSX直接传值给子类

function WelcomeDialog(){
    return(
        <FancyBorder color = "blue">
        <h1 className = "Dialog-title">
            Hi!
        </h1>
        <p className = "Dialog-message">
            你好~
        </p>
        </FancyBorder>
    )
}

有时候你需要很多个地方插口在组件中,而不是只使用children

function Contacts(){
        return <div className = "Contacts"/>;
    }
    function Chat(){
        return <div className = "Chat"/>;
    }
    function SplitPane(props){
        return(){
            <div className = "SplitPane">
            <div className = "SplitPane-left">
                {props.left}
            </div>
            <div className = "SpiltPane-right">
                {props.right}
            </div>
            </div>
        }
}
 
function App(){
    return(
        <SplitPane left = {<Contacts/>} right = {<Chat/>}>
    );
}
 
ReactDOM.render(){
    <App/>,
    document.getElementById()
}

在React中,像 <Contanct/> 或者 <Chat/> 等元素可以看成一个对象,可以像传参数一样将这些数据传递。

特殊情况

有时候在众多子组件中,可能会有一个特殊的组件。下例中, WelcomeDialog 就是 Dialog 中特殊的一个

funtion FancyBorder(props){
    return(
        <div className={'FancyBorder FancyBorder-' + props.color}>
        {props.children}
        </div>
    );
}
function Dialog(props){
    return(
        <FancyBorder color = "blue">
        <h1 className = "Dialog-title">
            {props.title}
        </h1>
        <p className = "Dialog-message">
            {props.message}
        </p>
        </FancyBorder>
    )
}
 
function WelcomeDialog(){
    return(
        <Dialog
        title = "Hi~"
        message = "你好"
        />
    );
}
 
ReactDOM.render(){
    <WelcomeDialog/>,
    document.getElementById('root')
}

组件对定于为类的同样适用

function FancyBorder(props) {
    return (
        <div className={'FancyBorder FancyBorder-' + props.color}>
        {props.children}
        </div>
    )
}

function Dialog(props){
    return(
        <FancyBorder color = "blue">
            <div className = "Dialog-title">
                <h1>{props.title}</h1>
            </div> 
            <div className = "Dialog-message">
                <p>{props.message}</p>
            </div>
            <div>
                {props.children}
            </div>        
        </FancyBorder>
    )
}

class SignUpDialog extends React.Component{
    constructor(props){
    super(props);
    this.state = {signUpName:''};
    this.handleChange = this.handleChange.bind(this);
    this.handleShow = this.handleShow.bind(this);
}
handleChange(e){
    this.setState({signUpName:e.target.value});
}
handleShow(e){
    alert('你好 ' + this.state.signUpName);
    e.preventDefault();
}
render(){
        return(
            <Dialog
            title = "你好"
            message = "欢迎来到这里"
            >
            <input type = "text" value={this.state.signUpName} onChange = {this.handleChange}/>
            <button value = "Sign Me Up!" type = "Submit" onClick = {this.handleShow}>Sign Me Up!</button>
            </Dialog>
        );
    }
}

ReactDOM.render(
    <SignUpDialog/>,
    document.getElementById('root')
)

至于继承

就没有了,组件可以接受任意的 props ,包括 原始值 、 反应元素 或 函数

如果希望在组件之间重用非ui功能,可以将其提取到单独的js模块中,组件可以导入并且使用该函数、对象、或者类,而不是进行扩展

对应构建React项目的思考

React是使用js构建大型,快速web应用程序的主要方式。
一般构建一个react应用程序的思考过程如下:

第一步:将ui分解为组件层次结构

结合设计稿来分层次命名

第二步:在React中构建静态版本

根据层次结构来构建静态版本的页面,不要有交互。需要构建可重用组件并使用props传递数据的组件。不要使用 state 来构建静态组件。 state 用于 交互性 ,即随时间变化的数据
构建分为 自上而下 跟 自下而上 。大型项目是自下而上,小型则反之。

第三步:确定ui状态的最小但是完整表示形式

确定是否为 state 可以自问三个问题

  1. 通过props从父母传入
  2. 随着时间推移而保持不变
  3. 基于组件中的任何state或者props来计算
    其中任何一个答案是肯定的则不是 state

第四步:确定 state 在哪里应该存在

对于应用程序中的每一个 state

  1. 确定每个基于该state呈现某些内容的组件

  2. 找到一个共同的拥有者组件

  3. 无论是公共所有者,还是等级较高的其他组成部分都应该拥有该state

  4. 如果无法找到一个有意识拥有这个state的组件,可以创建一个新的组件,只是为了保存state并将它添加到公共所有 者组件上方的层次结构中的某处

第五步:添加反向数据流

参考链接:https://react.docschina.org/docs/hello-world.html

React
The Road to learn React Part1
react-day2
  • 文章目录
  • 站点概览
  1. 1.react 学习笔记day-03
    1. 1.Containment
    2. 2.让组件通过嵌套JSX直接传值给子类
    3. 3.有时候你需要很多个地方插口在组件中,而不是只使用children
    4. 4.特殊情况
    5. 5.组件对定于为类的同样适用
    6. 6.至于继承
    7. 7.对应构建React项目的思考
      1. 1.第一步:将ui分解为组件层次结构
      2. 2.第二步:在React中构建静态版本
      3. 3.第四步:确定 <code>state</code> 在哪里应该存在
      4. 4.第五步:添加反向数据流
© 2018 — 2023赖彬鸿
1.6k
载入天数...载入时分秒...
0%