React学习笔记

2017-11-04  本文已影响0人  姒沝無痕

安装：

概述

核心：

ReactDoM.render()

JSX语法:

- eg1:
var names = ['alice', 'emily', 'kate'];

ReactDOM.render(
<div>
{
    names.map(function (name){
        return <div key={v.toString()}>Hello,{name}!</div> 
    })
}
</div>, // 注意使用循环结构时要添加key
document.getElementById('example')
);
//运行结果：


- eg2: 
const element = <h1>Hellow, world!</h1>


const element = <div tabIndex = "0></div>;

const element = <img src = {user.avatarUrl}/>

元素渲染：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

如下方法通过setInterval计时器每秒钟调用一个ReactDOM.render()

组件&&props

概述：

组件的定义：

规则：

function Welcome() {
    return <h1>Hello,{props.name}</h1>
}
// 该函数是一个有效的React组件，他接收一个单一的'props'对象并返回一个React元素。我们之所以成这种类型的组件为函数定义组件，是因为从字面上来看，他就是一个javascript函数。



class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件渲染

const element = <welcome name = "Sara" />


function Welcome (props){
    retrun <h1>Hello,{props.name</h1>
}
const element = <Welcome name = "Sara" />
ReactDOM.render(
element,
document.getElementById('root')
);

// 如上在页面展示内容为：Hello ,Sara
  1. React将{name: 'Sara'}作为props传入并调用Welcome组件。
  2. Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
  3. ReactDOM将DOM更新为<h1>Hello,Sara</h1>

组件的生命周期和状态

应用条件

概述：

Mounting : 如下方法在组件实例被创建和被插入到dom中时被调用。

constructor (props){
    super(props);
    this.state={
        color:props.initialColor
    };
}

组件的生命周期和状态简述：（总共10个api）

实例化

存在期

componentWillReceiveProps:function(nextProps){
          if(nextProps.bool){
                  this.setState({
                        bool: true
                  });
          }

}

state与props的区别:

state的作用：

state工作原理：

应用场景：

那些应该作为state

条件渲染：

function UseGreeting(props){
  return <h1>Welcome back!</h1>
}
function GuestGreeting(props){
    return <h1>Please sign up.</h1>
}
// 创建一个条件渲染组件。
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

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

//新建两个无状态组件
function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
/// 创建一个有状态组件。
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.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

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


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')
);

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

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

 function (!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')
);

列表&keys

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);
// 把整个listItems插入到ul元素中，然后渲染DOM：
ReactDOM.render(
    <ul>{listItems}</ul>
     document.getElementById('root')
);

 function NumberList(props){
    const number = props.number;
    const listItems = number.map((number)=>{
          <li>{number}</li>
    });
    return (
        <ul>{listItems}</ul>
    )
}
const numbers = [1,2,3,4,5];
ReactDOM.render(
    <NumberList number = {numbers} />
     document.getElementById('root')
) ;
上一篇 下一篇

猜你喜欢

热点阅读