React学习_笔记一

1.React JSX:
1-1:元素是构成React应用最小的单位,JSX就是用来声明React当中的元素.
要将React元素渲染到根DOM节点中,我们通过把它们都传递给ReactDOM.render()的方法来将渲染到页面上.
例如元素:var element=

hello world

’
渲染:ReactDOM.render(
element,
document.getElementById(‘example’)
);

2.React组件
2-1:自己定义组件使得我们的应用更容易来管理.
如:
function HelloMessage(props){
return

Hello World!

;
}
const element=.
我们用函数定义了一个组件,而用来引用这个组件.

联合使用法:

3.React State(状态):
3-1:React把组件看成是一个状态机（State Machines).通过与用户的交互,实现不同的状态，然后渲染UI,让用户界面和数据保持一致.
3-2：React中的react函数会把返回的代码和返回的内容如实的渲染到页面上.

Render（）{
Return（
<div>
<h1>react小涛！{(function(){return ‘is good’})}</h1>
</div>
）
}

3-3：
每当组件第一加到DOM中时都会调用componentDidMount() 函数,在React称为挂载.
每当组件生成的这个DOM被移除的时候时，会调用componentWillUnmount()函数，这在React中被称为卸载.

4.React Props:
4-1:state和props主要的区别在于props是不可变的,而state可以根据与用户交互来改变。

其中组件中传递的参数"Runnoob"对应的props代表是不可变.

4-2:state和props联合使用:

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

6.React条件渲染:
6-1:在React中，可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分,并且我们可以使用JavaScript操作符if或条件运算符来创建表示当前状态的元素，然后让React根据它们来更新UI.
例子:

6-2:组件也在花括号中包含JavaScript的逻辑与&&,它可以方便地条件渲染一个元素.