关于前端:reactts

一、react

1、元素渲染

（1）渲染元素

react会有一个根节点，如果是引入的react，则须要在不同的中央去定义react根节点。
通过reactDOM.render()将其dom节点渲染在页面上

const element = <h1>Hello, world!</h1>;ReactDOM.render(    element,    document.getElementById('example'));

（2）更新元素
react元素被渲染后是不可能被更改的。惟一的办法是创立一个办法，放入到render中。
React 只会更新必要的局部

值得注意的是 React DOM 首先会比拟元素内容先后的不同，而在渲染过程中只会更新扭转了的局部。

2、jsx

jsx是运行在js外部的
长处：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型平安的，在编译过程中就能发现错误。
应用 JSX 编写模板更加简略疾速。

毛病：

jsx不能应用if else

const element = <h1>Hello, world!</h1>;

react表达式写在花括号 {}
react 举荐应用内联款式
JSX 容许在模板中插入数组，数组会主动开展所有成员：

var arr = [  <h1>菜鸟教程</h1>,  <h2>学的不仅是技术，更是幻想！</h2>,];ReactDOM.render(  <div>{arr}</div>,  document.getElementById('example'));

3、组件

留神，原生 HTML 元素名以小写字母结尾，而自定义的 React 类名以大写字母结尾，比方 HelloMessage 不能写成 helloMessage。除此之外还须要留神组件类只能蕴含一个顶层标签，否则也会报错。

const element = <HelloMessage /> 自定义组件

函数组件

function HelloMessage(props) {    return <h1>Hello World!</h1>;}

类组件
在组件中必须实现render办法，在return中返回React对象

class Welcome extends React.Component {  render() {    return <h1>Hello World!</h1>;  }}

组件传递参数（props）

function HelloMessage(props) {    return <h1>Hello {props.name}!</h1>;} const element = <HelloMessage name="Runoob"/>; ReactDOM.render(    element,    document.getElementById('example'));

复合组件
咱们能够通过创立多个组件来合成一个组件，即把组件的不同性能点进行拆散。

无状态函数式组件只带有一个render办法的组件类

不能被实例化、渲染性能快
组件不能拜访this对象
组件不能拜访生命周期办法
无状态组件只能拜访props

区别：

编写模式
状态治理
生命周期
调用形式
获取渲染的值

useState()
userContext()
userReducer()
useEffect()

// 相当于componentDidMount生命周期useEffect(() => {    console.log("Hello");}, []);// useEffect回调函数中return一个函数，则return函数会在组件卸载的时候执行，正如componentWillUnmountReact.useEffect(() => {   return () => {     console.log("Bye");   }; }, []);

在应用hooks状况下，个别如果函数组件调用state，则须要创立一个类组件或者state晋升到你的父组件中，而后通过props对象传递到子组件

调用形式：
函数组件：执行函数
类组件：实例化类，调用实例对象的render办法

4、state

react通过state实现用户的交互、页面的渲染（不操作dom）

在 React 应用程序中，组件是有状态还是无状态被认为是可能随工夫而变动的组件的实现细节。

咱们能够在有状态组件中应用无状态组件，也能够在无状态组件中应用有状态组件。

5、props

state 和 props 次要的区别在于 props 是不可变的，而 state 能够依据与用户交互来扭转

子组件通过props来传递数据

6、事件处理

事件的办法须要绑定this，否则this为undefined。

绑定this三种办法：

handleClick = () => {    console.log('this is:', this);}<button onClick={this.handleClick}>     Click me</button>// bind<button onClick={this.handleClick.bind(this)}>     Click me</button>// 回调函数<button onClick={(e) => this.handleClick(e)}>     Click me</button>

7、条件渲染

（1）元素变量

通过元素变量判断是否显示或暗藏

（2）与运算符 &&

return (    <div>      <h1>Hello!</h1>      {unreadMessages.length > 0 &&        <h2>          您有 {unreadMessages.length} 条未读信息。        </h2>      }    </div>  );

（3）三目运算符

condition ? true : false

(4)避免组件渲染

if(test) {return null}
不会影响组件的生命周期的回调

8、组件api

设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted

setState
setState(object nextState[, function callback])

etState()总是会触发一次组件重绘

replaceState
replaceState(object nextState[, function callback])

办法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

9、生命周期

Mounting：已插入实在 DOM
Updating：正在被从新渲染
Unmounting：已移出实在 DOM

10、ajax

11、表单事件

onChange 办法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来从新渲染界面。

子组件中更新父组件的 state 时，你须要在父组件通过创立事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到你的子组件上

<Content myDataProp = {value}               updateStateProp = {this.handleChange}></Content>

12、refs

能够通过ref获取组件的援用
也能够通过getDOMNode()办法获取DOM元素

13、列表&keys

Keys 能够在 DOM 中的某些元素被减少或删除的时候帮忙 React 辨认哪些元素产生了变动。因而你该当给数组中的每一个元素赋予一个确定的标识。

function NumberList(props) {  const numbers = props.numbers;  return (    <ul>      {numbers.map((number) =>        <ListItem key={number.toString()}                  value={number} />       )}    </ul>  );}