博客

构建 React 开发环境

• npm install -g create-react-app
• create-react-app 【my-app】
• cd 【my-app】/
• npm start

初识react

• 
public/index.html

  中
  
id="root"

  与
  
src/index.js

  中
  
document.getElementById('root')

  关联
• 注释 {/* */}

组件

代码1

function App(props){
  return(
    <div>{props.propsData}</div>
  )
}

//引用 
import App from './App';
 <App  propsData="父传子数据" />

代码2

import React from 'react';
class App extends React.Component {
  render() {
    return (
       <div>
         <h1>{this.props.propsData}</h1>
       </div>
    );
  }
}
export default App

生命周期

• 
componentDidMount

  组件已被渲染到DOM后执行 生成定时器
• 
componentWillUnmount

  组件从DOM中被移除 注销定时器

setState()、事件处理

• react中不能直接修改state，可通过
  
setState()

  /构造函数是唯一可以给
  
this.state

  赋值地方
• react事件的命名采用小驼峰式

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {date:1};
      //在js中，class方法默认不会绑定this，为了在回调中使用this，需要bind进行绑定,或者使用箭头函数handleEvent = ()=>{}
      this.handleEvent = this.handleEvent.bind(this);
   }
 componentDidMount() {
      this.handleEvent()
   }
   handleEvent(){
      this.setState((state,props)=> ({
         date:state.date + 1
      }))
   }
   render() {
      return (
         <div onClick={this.handleEvent}>{this.state.date}</div>
      );
   }
}

事件的传递参数



通过

箭头函数

来实现：

onClick={(e) =>this.handleEvent('one数据')}




通过

Function.prototype.bind

来实现：

onClick={this.handleEvent.bind(this,'one数据')}


条件渲染

class App extends React.Component {
   constructor(props) {
      super(props);
      this.handleLoginClick = this.handleLoginClick.bind(this);
      this.handleLogoutClick = this.handleLogoutClick.bind(this);
      this.state = {isLoggedIn: false};
   }
   handleLogoutClick() {
      this.setState({isLoggedIn: false});
   }
   handleLoginClick() {
      this.setState({isLoggedIn: true});
   }
   render() {
      const isLoggedIn = this.state.isLoggedIn;
      let button;
      if (isLoggedIn) {
         button = <button onClick={this.handleLogoutClick}>Login</button>
      } else {
         button = <button onClick={this.handleLoginClick}>Logout</button>
      }
      return (
         <div>{button}</div>
      );
   }
}

运算符

• &&：
  
{10 > 3 && <h2>---{props.propsData}</h2>}

• 三目运算：
  
{0 > 3 ? <div>true</div> : <div>false</div>}


阻止组件渲染，通过

return null

实现

渲染多个组件

• 通过
  
map()

  方法来实现，尝试用
  
forEach()

  无效
• 
key

  给每一个元素赋予一个确定的标识

function App(){
   const Numdom = [1,2,3,4,5].map((item)=><li key={item}>{item}</li>);
   return(
      <ul>{Numdom}</ul>
   )
}

用

key

提取组件，如果提取一个组件

<App />

,应该把key保留在

<App key={index}/>

元素上，而不是

<App />

的子元素上

function ListItem(props) {
   const value = props.value;
   // key的不正确使用
   return ( <li key={value}>{value}</li>
   );
}
function App() {
   const listItems = [1,2,3,4].map((item) =>
      // key={item} 应该放在ListItem元素中
      <ListItem value={item} />
   );
   return (
      <ul>{listItems}</ul>
   );
}

JSX中允许大括号中嵌套任何表达式

比如：

function App(props) {
   return (
      <ul>
         {props.propsData.map((item,index)=>{
            return(<div>{index+1}.{item}</div>)
         })}
      </ul>
   );
}

待续。。。