React

1、React Event

在jsx中进行事件绑定，遵循驼峰式写法。例如：onClick onKeyUp onMouseOver

例子：

let a = <div id="abc" onClick={ clickMe }>我是react事件</div>
// 将编译好的虚拟DOM渲染城真实DOM
ReactDOM.render(a,document.getElementById("app"))

2、遍历数组

采用数组的map方法进行遍历迭代。

let arr = [1,2,3,4,5]
ReactDOM.render(<div>
    {
      arr.map(item=>{
        return <p key={item}>{item}</p>
      })
    }
  </div>,document.getElementById("app")
)

注意：遍历数组的时候需要加key，为什么？

key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
key 必须是唯一的。通常，我们使用数据中的id来作为元素的key

注意：尽量不要用数组的index作为key值，除非你知道这个index是不会改变的。还可以通过封装函数处理数组

function mapArr(arr) {
  return arr.map(item=>{
    return <p key={item}>{item}</p>
  })
}


ReactDOM.render(<div>
  {
    mapArr(arr)
  }
  <hr/>
  {
    mapArr(arr2)
  }
  </div>,document.getElementById('app')
)

3、实现样式

jsx中的class是保留字，如果想用class的话，可以通过className设置。

jsx中的style样式可以写成

style={
    {backgroundColor:'pink'}
}

例子：

ReactDOM.render(<div style={{backgroundColor:'pink',transform:'translateX(50px)'}} className="aaa">我是div元素</div>,document.getElementById("app"))

4、案例

注意：return后续跟一段jsx代码的时候，建议加() 功能：添加一个颜色问题：当我们点击每一项的时候，发现currentIndex改变了，但是视图是没有进行render更新的！原因：react只是view层框架，当数据改变了，内部肯定不会进行数据驱动视图的修改，不会进行视图的更新操作了。解决？封装了一个render函数，当数据改变了，重复的调用render函数，实现视图的更新。

let arr = [1,2,3,4,5]
let currentIndex = 0
function mapArr(arr) {
  return <ul>
      {
        arr.map((item,index)=>{
          return (
            <li
              key={index}
              className={currentIndex === index ? 'red' : ''}
              onClick={()=>{
                currentIndex=index
                render()
              }}
            >
              {item}
            </li>
          )
        })
      }
    </ul>
}
render()
function render(){
  ReactDOM.render(<div>
    {
      mapArr(arr)
    }
    </div>,document.getElementById("app"))
}

5、定义组件

5.1、函数方式定义组件：

const 组件名(首字母大写)=(props)=>{
    return jsx 表达式
}

例子：toggle切换

let isShow = true
function App(props) {
  return <div>
      <button onClick={()=>{
        isShow=!isShow
        render()
      }}>进行toggle切换！</button>
      <p style={{display:isShow?'block':'none'}}>我是p标签</p>
    </div>
}
render()
function render() {
  ReactDOM.render(<App/>,document.getElementById('app'))
}

5.2、类组件方式定义组件

class 组件名 extends React.Component {
    render(){
        // render是必不可少的钩子函数
        return jsx表达式
    }
}

例子：

let isShow = true
class App extends React.Component {
  render() {
    return (
      <div>
        <button onClick={()=>{
          isShow=!isShow
          render()
        }}>toggle切换</button>
        {/*isShow && <p>我是app组件</p>*/}
        { isShow || <p>我是app组件</p> }
      </div>
    )
  }
}
render()
function render() {
  ReactDOM.render(<App/>,document.getElementById('app'))
}

6、传递属性

类组件传递属性，内部之间通过this.props.xxx获取。

class App extends React.Component {
  render() {
    return (
      <div>
        我是app组件
        <br/>
        name:{this.props.name}
        <br/>
        age:{this.props.age+1}
      </div>
    )
  }
}

let userInfo = {
  name:"小明",
  age:10
}

ReactDOM.render(<App {...userInfo}/>,document.getElementById("app"))

函数式组件里面：注意：内部是没有this的！通过参数props就可以获取外部传入的属性值

function App(props) {
  return (
    <div>
      我是app组件
      <br/>
      name:{props.name}
      <br/>
      age:{props.age+1}
    </div>
  )
}

let userInfo = {
  name:"小明",
  age:10
}

ReactDOM.render(<App {...userInfo}/>,document.getElementById("app"))

React学习02