JSX

JSX是javascript语法的拓展，其特点有点想模板语言，却在javascript内部实现。

1.JSX表达式
2.JSX属性
3.JSX嵌套
4.JSX防注入攻击
5.JSX代表Objects

---

元素渲染

元素是构成react应用的最小单位。
react的元素是普通的对象。
将元素渲染到DOM 中，例：

<div id="root"></div>

//将元素渲染到root 中，
const element = <span>hello world!</span>;
ReactDOM.render(element,document.getElementById('root'));

---

在JSX中引入React

import React from 'react';
import ReactDOM from 'react-dom';
//ReactDOM.render() 是react的最基本方法，用于将模板转换为html语言，并插入到dom中。
ReactDOM.render(
    <div></div>
    ,document.getElementById('root')
)

---

组件（component）和props

组件的定义方式有两种 函数定义 和 类定义

1、函数的形式定义组件
function Button(props){
  return <button>{props.name}</button>
};
2、类的形式定义组件
class Button extends React.Component{
  render(){
      return <button>{this.props.name}</button>
  }
}

渲染组件

我们定义了一个Button的组件，现在我们就将定义的组件渲染到浏览器的DOM 中。

ReactDOM.render(
  <Button  name="hello!"/>, 
  document.getElementById('root')  
)

组合组件

可以将多个小组件组合在一起，总而形成一个完整的功能快。
比如：在页面中右一个表单，表单中会有输入框和确认按钮，如果我们能将按钮封、输入框 都分别封装成按钮组件、输入框组件。我们生成表单的时候，只需要用一个大的组件包含按钮组件和输入框组件就可完成一个表单的功能块。就像是搭积木，再今后的维护中，我们只需要维护单独的组件即可。

//按钮组件
function Button(props){
  return <button>{props.value}</button>
};
//输入框组件
function Input(props){
  return <input type="text" name="username" value={props.username}/>
}
//表单组件
//表单组件就是将按钮和输入框组件进行组合即可，可以将父组件中的值，传递到子组件中。
function Form(props){
  return (
    <div>
        <Input value={props.username}/>      
        <Button  name={props.value} />
    </div>
  )
}
//将组合的组件渲染到DOM 中
ReactDOM.render(<Form  name="确定" username="zhangsan"/>,document.getElementById('root'))

生命周期 和 state

//挂载
componentDidMount(){}

//清除
componentWillUnmount(){}

---

事件处理

React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同:

React事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM元素的写法)。

PS：谨慎使用this，在react中，类的方法默认是没有绑定this,如果忘记绑定this,就会出现undefined。
react绑定this的三种方法：

• 在constructor构造函数中绑定，
  this.handleClick = this.handleClick.bind(this);
• 属性初始化
  handleClick = () => {console.log('this is:', this);}
  <button onClick={this.handleClick}>
• 回调函数中调用箭头函数。
  <button onClick={(e) => this.handleClick(e)}>

---

条件渲染

• 元素变量
• 与运算符&&
• 三元运算符
• 阻止组件渲染

阻止组件渲染：

通过一个状态变量来控制，当状态变量为false时，就使用return false返回；组件的内容在return 下面，所有也就不执行了，从而达到阻止组件渲染的效果。

//通过函数声明一个组件，组件的首字母必须大写。
function Button(){
  //通过status这个状态变量来控制。
  if(!props.status) return false;
  //如果status为false时，返回false;也就不执行render函数里的内容了。
  render(){
    return <button>click me!</button>
  }
}

---

列表 & keys

• 遍历数组

遍历数组

const name = [1,2,3,4,5];
const list = name.map((item)=><li>{item * 2}</li>);

ReactDOM.render(
    <ol>{list}</ol>
    ,
    document.getElementById('root')
);

运行以上代码的时候需要给他li分配一个key,不然会报错。

image.png

现在我们就重构一下上面的例子：

function Item(props){
    const name  = props.name;
    const lists = name.map((item,index)=><li key={index}>{item}</li>);
    return <ul>{lists}</ul>;
}
const arr= [1,2,3,4,5]
ReactDOM.render(
    <Item name={arr}/>,
    document.getElementById('root')
)

受控组件

React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。相应的，其值由React控制的输入表单元素称为“受控组件”。

// 声明From 组件
class From extends React.Component{
    constructor(props){//构造函数
        super(props);
        this.state = {value : '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleSubmit(event){//提交表单执行的函数
        console.log('This From value is "'+this.state.value+'"')
        event.preventDefault();
    }
    handleChange(event){//更新输入框内容
        this.setState({value : event.target.value})
    }
    render(){//模板
        return (
            <form action="post" onSubmit={this.handleSubmit}>
                <input type="text" name='username' value={this.state.value} onChange={this.handleChange}/>
                <br/>
                <input type="submit" value="确定"/>
            </form>
        )
    }
}
ReactDOM.render(
    <From/>,
    document.getElementById('root')
)

• textarea 在react中使用value给textarea传值。
• select 在react中使用value 选择默认选择项，value属性在select标签上。

---

状态提升

有时候会存在多个组件共用一个状态数据，这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。

import React,{Component} from 'react';
import ReactDOM,{render} from 'react-dom';

class Sun extends Component{
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e){
        this.props.temp(e.target.value);
    }
    render(){
        return(
            <input type="text" value={this.props.value} onChange={this.handleChange}/>
        )
    }

}

class Fa extends Component{
    constructor(props){
        super(props);
        this.handle = this.handle.bind(this);
        this.handleS = this.handleS.bind(this);
        this.state = {s:'c',temperatrue:''};
    }
    handle(temperatrue){
        this.setState({s:'c',temperatrue});
    }
    handleS(temperatrue){
        this.setState({s:'f',temperatrue});
    }
    render(){
        const isC = this.state.s;
        const temperatrue = this.state.temperatrue;
        const c = isC === 'c' ? (temperatrue/200) : temperatrue;
        const f = isC === 'f' ? (temperatrue*200) : temperatrue;
        return(
            <div>
                <Sun value={f} temp={this.handle}/>
                <Sun value={c} temp={this.handleS}/>
            </div>
        )
    }
}

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