React

1、使用JSX语法 定义一个简单的React元素，并渲染到页面

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

//定义React元素 
const element = <h1>hello.js</h1>;

//渲染React元素
 ReactDOM.render(element,document.getElementById("root"));

其实JSX语法的背后就是调用React.createElement()方法 ，以上JSX代码经编译后的代码如下

使用React.createElement()方法创建并返回一个简单的React元素，并渲染到页面、

React.creatElement()方法 就是纯JS语法 React.createElement()方法

//定义一个react元素 
const element1 = React.createElement(
  "h1",
  null,
  "hello,js"
);
//渲染React元素
ReactDOM.render(element1,document.getElementById("root"));

2、使用JSX语法 定义一个包含JS表达式的React元素，并渲染出来

用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中

为便于阅读，我们将JSX分割成多行。

推荐使用括号将 JSX 包裹起来

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

// 定义一个js对象
const user = {
  firstName: "Neal",
  lastName: "Caffery"
};
//定义一个js函数
function parseName(user){
  return user.firstName +" "+user.lastName;  
} 

//定义一个react元素，react元素中插入js表达式
const element =(
  <h1>
     Hello,{parseName(user)}!
   </h1>
);
//渲染React元素
ReactDOM.render(element,document.getElementById("root"));

以上JSX经过编译后都会变成JavaScript对象。如下

//定义一个react元素 
const element1 = React.createElement(
  "h1",
  null,
  "Hello,",
  parseName(user)

);

3、React元素可以代表一个DOM元素，也可以代表一个React组件

代表DOM元素的React元素

代表React组件的React元素

4、通过JS函数 定义一个React组件，并渲染出来

通过JS函数定义React组件：接受任意输入props，返回一个React元素。

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

//JS函数方法 定义一个React组件
function Welcome(props){
  return <h1>welcome,{props.name}</h1>;
}
//定义一个代表React组件的React元素
const element = <Welcome name="Neal" />;        
//渲染React元素
ReactDOM.render(element,document.getElementById("root"));

函数组件是无状态组件，在函数组件中，无法使用state,也无法使用组件的生命周期方法。它是展示性组件，接收props，渲染dom，不关注其他逻辑。。函数组件中没有this

5、通过JS对象 给代表React组件的React元素设置属性

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

//定义一个JS对象
const comment ={
  text:"I hope you enjoy learning React",
  name:"Neal Caffery",   
};

//定义一个React组件
function Comment(props){
  return (
    <div>
      <div>{props.name}</div>
      <div>{props.text}</div>   
    </div>
  );
}
  
//渲染React组件
//通过JS对象comment给React组件设置JSX属性
ReactDOM.render(
 <Comment name={comment.name} text={comment.text}/>,
  document.getElementById("root")
);

所有 React 组件都必须是纯函数，并禁止修改其自身 props 。

组件的state可以 动态改变组件输出

6、通过类定义React组件

简单的类组件：定义类继承自React.Component类，定义render()方法，该方法返回React元素

给类组件设置状态，类组件的状态state是私有的，并且由组件本身完全控制。组件state有点像js对象的格式

 class Clock extends React.Component{
   //1.构造器
   constructor (props){
     super(props);
     this.state={date:new Date()};
   }
   
   //2.render()方法
   render(){
    return  <div>
       <h1>Hello,World!</h1>
       <h2>It is {this.state.date.toLocaleTimeString()}</h2>
     </div>
   }
   
   //3.修改state的tick()方法
   tick(){
     //调用setState()方法修改组件的state
     this.setState({
       date:new Date()                  
     });
   }
   
 
   //4.生命周期钩子
   componentDidMount(){
     this.timeID=setInterval(()=>this.tick(),1000);
   }
   //5.生命周期钩子
   componentWillUnmount(){
     clearInterval(this.timerID);
   }
   
  
 }

 ReactDOM.render(<Clock />,document.getElementById("root"));

7、类组件处理事件

//定义类组件
class Toggle extends React.Component{
   //1.构造器 (1)定义props(2)定义state（3）绑定回调函数
   constructor(props){
     super(props);
     this.state={isToggleOn:true};
    this.handleClick = this.handleClick.bind(this);
   }
   
   //3.定义回调函数
   handleClick(){
     this.setState(prevState=>({
       isToggleOn: !prevState.isToggleOn
     }));
   }
   //2.render方法，返回一个React元素
   render(){
     return (
     
       <button onClick={this.handleClick}>{this.state.isToggleOn?'ON':'OFF'}</button>
     );
   }
 }

//渲染类组件
ReactDOM.render(<Toggle />,document.getElementById("root"));

注意回调函数handleClick()中的 =>后必须要有() 否则报错

React常犯错：

1.return 只能返回一个根元素

2.return ();  ()内部不能有；

3.关键字别写错

4.React组件访问外部的对象，变量等都是通过props