React学习笔记-前端框架学习-第二篇

接上一篇React学习笔记

React事件处理

• React元素的事件处理和DOM元素的很相似，但是有一点语法上的不同：
  • React事件绑定属性的命名采用驼峰式写法，而不是小写。
  • 若采用JSX的语法，需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）

<!--传统的HTML-->
<button onclick="activateLasers()">
    Activate Lasers
</button>

<!-- React中 -->
<button onClick={activateLasers}>
    Activate Lasera
</button>

• 在React中另一个不同是不能使用返回false的方式阻止默认行为。必须明确的使用preventDefault.

<!-- 传统的html中阻止链接默认打开一个新页面 -->
<a href="https://google.com" onclick="console.log('The link was clicked.'); return false">
Click me
</a>

<!-- 在React中，应该这样写 -->
function  ActionLink(){
    function handleClick(e){
        e.preventDefault();
        console.log('The link was clicked.');
    }
    return (
        <a href="https:google.com" onClick={handleClick}>
        Click me
        </a>
    )
}

• 使用React时，通常不需要使用addEventListener为一个已创建的DOM元素添加监听器。仅仅需要在这个元素初始渲染时提供一个监听器。
• 当你使用ES6 class语法定义一个组件时，事件处理器会成为类的一个方法。

//下面的Toggle组件渲染一个让用户切换开关的按钮
class Toggle extend React.Component{
    constructor(props){
        this.state = {isToggleOn : true};

        //下面的绑定是必要的，见下面的解释
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
        this.setState => ({
            istoggleOn : !prevState.isToggleOn
        })
    );
}

render(){
    return (
        <button onClick={this.Click}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
     );
    }
}

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

• JSX回调函数中的this，类的方法默认是不会绑定this的。若你忘记绑定this.handleClick并把它传入onClick,但你调用这个函数时this的值会是undefined。
• 若使用bind让你很烦躁，使用下面的解决办法：

//1. 使用实验性的属性初始化器语法，使用属性初始化器来正确的绑定回调函数
class LoggingButton extends React.Component{
    //handleClick = () => {
        console.log('this is :' , this);
    } 
    render(){
        return {
            <button onclick={this.handleClick}>
            Click me
            </button>
        }
    }
}
//这个语法在Create React App中默认开启

//2. 不使用属性初始化器语法，可以在回调函数中使用箭头函数：
class LoggingButton extends React.Component{
    handleClick(){
        console.log('this is: ', this);
    }
    render(){
        return (
            <button onClick={(e) => this.handleClick(e)}>
                Click me
            </button>
        );
    }
}
//这个语法有个问题，详见https://www.reactjscn.com/docs/handling-events.html

向事件处理程序传递参数

• 一般，我们会为事件处理程序传递额外的参数。
• 实例（若ID是你要删除那行的ID，一下两种方式都可以向事件处理程序传递参数）

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this,id)}>Delete Row</button>

//上述例子中，参数e作为React事件对象将会被作为第二个参数进行传递。
//通过箭头函数的方式，事件对象必须显示的进行传递

• 通过bind方式向监听函数传参，在类组件中定义的监听函数，事件对象e要排在所传参数的后面。

条件渲染

• 在React中，可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。
• React中的条件渲染和JS中的一致，使用Javascript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI。
• 实例：(创建一个Greeting组件，根据用户是否登录来显示其中之一)

function Greeting（props）{
    const isloggedIn = props.isLoggedIn;
    if(isLoggedIn){
        return <UserGreenting />;
    }
    return <GuestGreeting />;
}

ReactDOM.render(
    <Greeting isLoggedIn={false} />,
    document.getElementById('root')
);

元素变量

• 可以使用变量来存储元素。其可以帮助我们有条件的渲染组件的一部分，而输出的其他部分不会更改。
• 实例：（两个组件分别代表注销和登录）

function LoginButton(props){
    retrun (
        <button onClick={props.onClick}>
        Login
        </button>
    );
}
function LogoutButton(props){
    return (
        <button onClick={props.onClick}>
        Logout
        </button>
    );
}

• 下面的例子要创建一个名为LoginControl的有状态的组件（它会根据当前的状态来渲染 或）
• 同时渲染前面例子中的

class LoginControl extends React.Component{
    constructor(props){
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn: false};
    }
    handleLoginClick(){
        this.setState({isLoggedIn: true});
    }
    handleLogoutClick(){
        this.setState({isLoggedIn: false});
    }
    render(){
        const isLoggedIn = this.state.isLoggedIn;

        let button = null;
        if(isLoggedIn){
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        }else{
            button = <LoginButton onclick={this.handleLogoutClick} />;
        }
        return(
            <div>
                <Greeting isLoggedIn={isLoggedIn} />
                    {button}
            </div>
        );
    }
}

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

与运算符 &&

• 通过用花括号包裹代码在JSX中嵌入任何表达式，包括JavaScript的逻辑与&&，它可以方便地条件渲染一个元素。
• 实例：

function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    return (
        <div>
            <h1>Hello!</h1>
            {unreadMessages.length > 0 && 
                <h2>
                    You have {unreadMessages.length} unread messages .
                </h2>
            }
            </div>
    );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
    <mailbox unreadMessages={messages} />,
    document.getElementById('root')
);

• 在JS中，true && exapression总是返回expression
• false && expression return false.
• 因此，若条件是true，&&右侧的元素就会被渲染，若是false，react就会忽略并跳过。

三目运算符

• 条件渲染的另一种方法就是使用JS的条件运算符 condition ? true : false
• 三目运算符在JS中会被大量运用，必须对这个运算符非常熟练

//实例
render(){
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
        </div>
    );
}

• 在较大的表达式中使用：

render(){
    const isLoggedIn = this.state.isLoggedIn;
    return (
        <div>
            {isLoggedIn ? (
                <LogoutBUtton onClick={this.handleLogoutClick}/>
            ): (
                <LoginButton onCLick={this.handleLoginClick} />
            )}
        </div>
    );
}

• 注意：若条件变得过于复杂，就需要提取组件

阻止组件渲染

• 极少数情况下，你可能需要隐藏组件，让render方法返回null即可。
• 实例「根据属性warn的值条件渲染，若warn的值是false，组件不会渲染」

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

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

此笔记只作学习使用，充分参考了React官网-文档和思否上的相关博客！
建议学习React还是要充分的学习官网上的文档教程！